Converting JSON data into TypeScript interface objects within an Angular 2 environment

I have a JSON dataset with the following structure: 

{
  "timestamp": 1467471622,
  "base": "USD",
  "rates": {
    "AED": 3.673027,
    "AFN": 68.475,
    "ALL": 123.095199,
    "AMD": 476.8075,
    "ANG": 1.78385,
    "AOA": 165.846832,
    "ARS": 15.05143,
    "AUD": 1.333463,
    "AWG": 1.793333,
    "AZN": 1.553975,
    "BAM": 1.757679,
    "BBD": 2,
    "BDT": 78.33184,
    "BGN": 1.756683,
    "BHD": 0.377337,
    "BIF": 1660.642515,
    "BMD": 1,
    "BND": 1.344589,

Is there a way to convert this data into multiple TypeScript objects like the one below: 

export interface Stock {
  name: string;
  value: number;
}

Appreciate any suggestions on accomplishing this task.

jsonobjectdictionarytypescriptangular

Answer №1

const currencyKeys = Object.keys(data.rates);
const mappedCurrencies: Stock[] = currencyKeys.map(currency => {
    return { name: currency, value: data.rates[currency] } as Stock;
});

console.log(mappedCurrencies);

Check out the code in action here!

Answer №2

No need to manually create mappings. Your Typescript code can simply be:

export interface Stock{
  timestamp : number,
  base : string,
  rates : Rates
}

export class Rates{
  AED : number,
 ..... and so forth

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How come my Collectionview cells are disappearing when I switch to another view controller in my Swift project?

I have successfully implemented JSON parsing and adding cells in a CollectionView. However, when I navigate away from this ViewController and then come back to it, the CollectionView does not display properly even though the data is being added in the JSON ...

jsonswiftuicollectionview

What are the steps to launch a Firebase application without requiring user authentication?

I have a unique firebase app/game that does not require authentication. My main goal is to allow anyone to easily access the website or mobile app and start playing right away, without the need for user IDs. I have been receiving numerous emails from Fireb ...

angularfirebasefirebase-authenticationfirebase-security

What is preventing me from successfully retrieving data at times when using curl_setopt and jQuery Ajax?

In my quest to fetch data from another server, I am using the curl_setopt PHP function along with Ajax. The function I have created seems to be working fine, but sometimes when I refresh the page and the internet connection is slow, I don't receive an ...

javascriptphpjqueryjsonajax

Converting JSON data into a versatile Java object with spatial capabilities

Is there a recommended method or library for deserializing a JSON string into a Java Object containing Geometry (such as JTS) and a list of attributes? I have multiple data sources that I need to query and display on a map with their attribute information ...

javajson

Is it possible to run NestJS commands without relying on npx?

I recently installed nestjs using npm, but I encountered an issue where it would not work unless I added npx before every nest command. For example: npx nest -v Without using npx, the commands would not execute properly. In addition, I also faced errors ...

typescriptnpmnestjsnpx

Retrieve data from the endpoint using Routing.generate to access the JSON route

My goal is to retrieve data from the database within a Symfony controller, encode the response into JSON format. The code snippet for this functionality is shown below: /** * @Route("/jsondata", options={"expose"=true}, name="my_route_to_json_data") */ ...

angularjsjsonsymfony

How can we transform the `toUSD(amount)` function into a prototype function?

This function is functioning perfectly as intended. function toUSD(amount): string { // CONVERT number to $0.00 format return new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(amount); }; Here is how I currently i ...

typescriptdeno

Difficulty parsing data from a JSON file using JavaScript

My knowledge about AJAX and JSON is very limited. I am currently attempting to import the information from dealerData.json into my MVVM viewModel, however, 'data' keeps returning as undefined. $(function () { var object; $.ajax({ ...

javascriptjqueryajaxjsonmvvm

What are the steps to set up NextJS 12.2 with SWC, Jest, Eslint, and Typescript for optimal configuration?

Having trouble resolving an error with Next/Babel in Jest files while using VSCode. Any suggestions on how to fix this? I am currently working with NextJS and SWC, and I have "extends": "next" set in my .eslintrc file. Error message: Parsing error - Can ...

typescriptjestjsnext.jseslintswc-compiler

Using pandas to transform nested JSON into a flat table structure

My JSON data structure is as follows: { "a": "a_1", "b": "b_1", "c": [{ "d": "d_1", "e": "e_1", "f": [], "g": "g_1", "h": "h_1" }, { "d": "d_2", "e": "e_2", "f": [], " ...

pythonjsonpandasdataframe

The rendering of the Angular 2 D3 tree is not functioning properly

Attempting to transition a tree created with d3 (v3) in vanilla JavaScript into an Angular2 component has been challenging for me. The issue lies in displaying it correctly within the component. Below is the code snippet from tree.component.ts: import { ...

javascriptangulartypescriptd3.jstree

Why are my variables resetting in Angular after ngAfterViewInit?

There seems to be an issue with my variables resetting after successfully using them in ngAfterViewInit(). I have a few @ViewChild and regular variables that are utilized or set in ngAfterViewInit. However, when certain events that I added post-initializa ...

javascriptangulartypescript

Java's multi-dimensional data structure allows for intricate organization and storage of

I am currently facing a challenge where I need to design a data structure with specific syntax requirements: [ status: "success", statusDescription: "statusDescription" count: "5", states: [ [stateId: "1", stateDescription: "1 description"], [stat ...

javaarraysdata-structuresdictionaryjax-ws

Oops! An unhandled promise error occurred when trying to fetch a URL with a status of 0. The response received has a status code of

I keep encountering an error whenever I try to hit a post request URL: Error: Uncaught (in promise): Response with status: 0 for URL: null at c (http://localhost:8100/build/polyfills.js:3:19752) at c (http://localhost:8100/build/polyfills.js:3:1 ...

angulartypescriptionic-frameworkionic3typescript2.0

The EmailInstructorsComponent is missing a component factory. Make sure you have added it to @NgModule.entryComponents

I am currently utilizing the ngx-admin template and attempting to create a modal that will open upon clicking a button. My goal is to display a form within the modal window, however, upon clicking the button, the modal opens but the form does not appear, r ...

node.jsangulartypescriptecmascript-6single-page-application

Determining the generic type argument of a class can be unsuccessful due to the specific properties within that class

Why is it that Typescript sometimes fails to infer types in seemingly simple cases? I am trying to understand the behavior behind this. When Typescript's Type Inference Goes Wrong Consider the scenario where we have the following class declarations: ...

typescript

How can I deploy a react-express application to Azure cloud platform?

Struggling to deploy my react-express application on Azure. The code is divided into client and server directories. Attempted deployment using Azure Static Web application but encountered failure. https://i.stack.imgur.com/ailA0.png https://i.stack.imgur.c ...

reactjstypescriptazureexpress

Grouping JSON data by a specific key is the key to better organization

Assume the JSON data looks like this: $string = '{ "John": { "status":"Wait", "id":"001" }, "Jennifer": { "status":"Active", "id":"002" }, "James": { "status":"Active", "age":56, "count":10, "progress":0.0029857, ...

phparraysjsongrouping

I aim to break down a function into several functions using jQuery and AJAX for better organization and efficiency

I am working with a JavaScript file that includes an Ajax function to fetch data from a JSON file on a server. The goal is to interpret this data into a table, but I would like to break down the process into separate functions for generating links, dates, ...

javascriptjqueryhtmljsonajax

saving the JSON information for dropdown options within a variable

Greetings everyone I have successfully retrieved the options for my select tag in json format and used this code to populate the select tag: var mySelect = $('#'+select_id) $.each(response, function(key,val){ $('<option/>&apo ...

javascriptjqueryhtmlajaxjson