jupiter sailormoon
jupiter sailormoon

Reputation: 301

How to map json objects to typescript arrays

I have tried various examples but none has worked so far. I have a GET response as follows:

{data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, …} config: {adapter: ƒ, transformRequest: {…}, transformResponse: {…}, timeout: 0, xsrfCookieName: "XSRF-TOKEN", …}


data:

sales: Array(2) 0: {Id: 2, Amount: 500, DateCreated: "01/01/2019 00:00:00"} 1: {Id: 3, Amount: 410, DateCreated: "01/20/2019 00:00:00"}

I have an interface definition as follows:

interface ISales{
  id:number;
  amount:number;
  dateCreated:Date
}

I want to create an array and fill in the values from the response sales. I have tried the following:

 const result: ISales = response.data.sales;
      let payments: ISales[];
      payments = [];
      payments.push(result);


payments.map((item)=>{"whole array", console.log(item)})

payments.map((item)=>{"property only", console.log(item.amount)})

In the above the whole array displays the data right as

(2) [{…}, {…}] 0: {Id: 2, Amount: 500, DateCreated: "01/01/2019 00:00:00"} 1: {Id: 3, Amount: 410, DateCreated: "01/20/2019 00:00:00"} length: 2 proto: Array(0)

Whereas the property only is undefined. What is wrong with my code. How can I read the property value and store it in payments?

Upvotes: 1

Views: 112

Answers (2)

jupiter sailormoon
jupiter sailormoon

Reputation: 301

I finally managed to find the error. The properties in the interface were camel case whereas, those from the response were pascal case.

Upvotes: 1

Aston
Aston

Reputation: 3712

This should work:

const result: ISales[] = response.data.sales;
result.map((isales: ISales)=>{console.log(isales)});
result.map((isales: ISales)=>{console.log(isales.amount)});

Upvotes: 0

Related Questions