How to format data from api response Angular HttpClient

Question

I am trying to make an angular HttpClient get request but am having trouble with doing anything with the data.

I am using an api which is returning data in the form

(10)[{...}, {...}, {...}, ...]
[
0:{
   row: Array(4)
     0: "someid"
     1: "somename"
     2: "someaddress"
     3: "somepostcode"
  },
1:{
   row: Array(4)
     0: "someid"
     1: "somename"
     2: "someaddress"
     3: "somepostcode"
  },
2:{
   row: Array(4)
     0: "someid"
     1: "somename"
     2: "someaddress"
     3: "somepostcode"
  }, 
...
]

I just want to be able to create a list of objects with "someaddress" and "someid" fields from the get data. I have looked at various tutorials but keep getting undefined elements. How could you get the data from this.

you are getting an array of objects . run a loop and create your object — CruelEngine
– CruelEngine, Commented Mar 16, 2018 at 10:02

Laiso · Accepted Answer · 2018-03-16 10:19:05Z

4

You can do like this:

const data = [ // I have reformatted your returned data
    { row: ["someId", "somename", "someaddress"] },
    { row: ["someId", "somename", "someaddress"] },
    { row: ["someId", "somename", "someaddress"] },
    { row: ["someId", "somename", "someaddress"] }
];
    
const newData = data.map(item => ({ id: item.row[0], address: item.row[2] }));
    
console.log(newData);

Hope it helps! :)

edited Mar 16, 2018 at 10:19

answered Mar 16, 2018 at 10:07

Laiso

2,6503 gold badges19 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user4676340 · Accepted Answer · 2018-03-16 10:06:25Z

0

If you want to type your HTTP responses, use the generic type :

interface MyInterface {
  row: string[];
}

return this.http.get<MyInterface[]>('URL');

answered Mar 16, 2018 at 10:06

user4676340

Collectives™ on Stack Overflow

How to format data from api response Angular HttpClient

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related