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

A guide on successfully sending parameters to Angular routes

Currently, I am delving into Angular and exploring various basic concepts such as routing, Observables (and subscribing to them), making HTTP requests, and utilizing routing parameters. One scenario I have set up involves sending a HTTP GET request to JSON ...

angulartypescriptangular-router

Transferring images from an Android device to a MySQL server

Within Activity A, there are 3 instances of listView. Upon clicking the submit button, my objective is to save both the text and imagePath into MySQL, with the image being stored in the PhotoUpload folder. String imagess; Uri imgURI; public void uploadI ...

phpandroidjsonimageuri

Exporting constant files in AngularAngular Constant Files Exportation

Just a quick question. Currently, I have a constants TS file where all my constants are defined like so: export const MY_TEST_CONSTANT = `Something`; export const MY_TEST_CONSTANT2 = `Something Else`; Within the main component, I am importing these const ...

angular

Transform a group of tuples into a dictionary while incorporating the number of occurrences as values in the dictionary

I have a collection of pairs collection_input = [("00", 1), ("10", 2), ("00", 3), ("10", 1), ("00", 2), ("11", 1)] I aim to transform this pair collection into a dictionary where the values for d ...

pythondictionarytuples

Transform a nested JSON Object into a customized array structure

My task involves converting a nested JSON object into a specific format, as demonstrated below: let jsonObj ={"data": { "cardShop": { "cardData": { "cardTitle": "The Platinum Card<sup> ...

javascriptarraysjsonobjectnested

Navigating in Angular 2.0.0-rc1 with routes and setting a default route using use

Is it true that "useAsDefault" has been removed in angular2.0.0-rc1? Any suggestions for a workaround? I noticed in the Angular documentation they are using the OnInit method... Do subroutes still function with the /... notation? Thanks ...

routesangularrelease

Building an advanced numerical input validation system with Angular 7

In AngularJS, the following code is used to create a form with an input field of type "number": <form name="f" novalidate> <input type="number" ng-model="x" name="x"> </form> <div ng-if="f.x.$error.number">NaN</div> Is it p ...

angular

Monitor and compile numerous directories simultaneously in TypeScript (monorepo)

I've been searching far and wide online for a solution to my problem, but unfortunately, I haven't come across anything useful yet. Essentially, I am in need of a tool or method that will allow me to kick off TypeScript file Watching/Compiling in ...

typescriptnpmmonorepo

Is it impossible to extend a Typescript class with an overriding method that uses a different parameter?

I am currently working on a Typescript MVC app and encountering an issue. When I try to extend my BaseController and override the ajaxMethod with different parameters, my transpiler throws an error. Any help would be appreciated. Below is the code snippet ...

javascripttypescriptecmascript-6

Struggling to parse JSON data in Node.js using Express that was produced with JSONUtility in Unity

This is an example of a PUT request I'm using in Unity: UnityWebRequest request = UnityWebRequest.Put(baseUrl + "miniGame1s/", JsonUtility.ToJson(cardsToSend)); The object being sent, "cardsToSend", is based on the following class structure: [Seria ...

jsonnode.jsexpressunity-game-engine

Storing JSON information on your iPhone: Should you store the JSON string as is, or convert it into an object and utilize NSCoding + NSKeyedArchiver for storage?

When it comes to creating an iPhone application, one important aspect to consider is how to handle data retrieved from a remote server. In my specific case, I am using the Json Framework to parse json data and display it in a UIview. The question arises wh ...

iphonejsoniosnscodingstoring-data

Using a pipe to display the length of an array in Angular 4 using *ng

I'm struggling with displaying a "No Records Found" message in my app that features a range slider. Whenever the range slider is dragged, the results are updated based on the value of "sliderPipe". Despite this, I am unable to show the message when no ...

angular

What is the abbreviation for indicating a return type as nullable?

Is there a way to use shorthand for nullable return types in TypeScript similar to using "name?: type" for parameters? function veryUsefulFunction(val?: string /* this is OK */) // but not this or other things I've tried. // is there a way a ...

typescript

Jackson can convert property fields starting with "property_" into a list during deserialization

My task involves serializing an object class: public class DigitalInput { private String id; private Date timestamp; private String matter; private String comment; private String channelId; private List<IndexableProperty> o ...

javajsonjackson

Access the JSON data containing sub array values and showcase them on an HTML page by utilizing ngFor

Greetings! I am currently working on a web application where I need to showcase student data that is being received in JSON format. Below is the TypeScript code snippet that outlines the structure of the student data: export interface studentData{ ...

javascriptangulartypescriptmat-tablemat-chip

Angular 2's @ViewChild directive may sometimes yield undefined results

After consulting various related posts and documentation, I am still struggling to achieve the desired outcome with @ViewChild. My main objective is to adjust the scroll position of a div. This particular element is not a component, but a regular div in m ...

domangularscrollviewchild

I'm having trouble understanding why I can't access the properties of a class within a function that has been passed to an Angular

Currently, I have integrated HTML 5 geolocation into an Angular component: ... export class AngularComponent { ... constructor(private db: DatabaseService) {} // this function is linked to an HTML button logCoords(message, ...

javascriptangulartypescriptgeolocation

AngularJS Large file size

After successfully building the 5 MIN QUICKSTART app, I decided to minify it with webpack following the recommendations in the angularJS docs. To my surprise, the size of the minified AngularJS file turned out to be approximately 700 KB, which is significa ...

javascriptangularjsangularminify

The error message "Angular 8: Type 'void' cannot be assigned to type 'ObservableInput<any>'" indicates a type mismatch in the Angular 8 code

I am having an issue with a method that needs to be called every 5 minutes to check a user's network connectivity. I keep getting the following error message and I can't figure out what it means: Type 'void' is not assignable to type &a ...

angular

Tips on mocking an ngrx selector within a component

Within a component, we utilize an ngrx selector to access various segments of the state. public isListLoading$ = this.store.select(fromStore.getLoading); public users$ = this.store.select(fromStore.getUsers); The fromStore.method is formed using the ngrx ...

angularjasminengrx