How to assign json response to a Array in Angular 4

Question

I am new to angular 4 ,Here I need to consume API response and set it to the array .

but in my case it returns [object object].

JSON response Format:

{
  "Table": [
    {
      "S_NO": 1,
      "AN_ID": 37,
      "AN_TYPE": "Church",
      "AN_TITLE": "Donation",
      "AN_DATE": "2018-12-05T18:30:00",
      "AN_STATUS": "Active",
      "AN_DESC": "Test"
    }
  ],
  "Table1": [
    {
      "IMAGES": "http://localhost:49813/Images/Announcements/Church/Donation/IMG_0914.JPG"
    },
    {
      "IMAGES": "http://localhost:49813/Images/Announcements/Church/Donation/IMG_0916.JPG"
    },
    {
      "IMAGES": "http://localhost:49813/Images/Announcements/Church/Donation/IMG_0917.JPG"
    },
    {
      "IMAGES": "http://localhost:49813/Images/Announcements/Church/Donation/IMG_0919.JPG"
    },
    {
      "IMAGES": "http://localhost:49813/Images/Announcements/Church/Donation/IMG_0921.JPG"
    }
  ]
}

app.component.html

for(var i = 0; i <= data; i++){
        this.urls.push(data['Table1'][0]['IMAGES']);
      }

But it returns [object object].Can anyone help me to fix this .

Looks like your JSON structure is not what you are thinking of, could you post correct structure by typing manually? — prabhatojha
– prabhatojha, Commented Dec 9, 2018 at 8:33
It's easier if you console.log in the browser devtool since it looks the same as the image before — Lucho
– Lucho, Commented Dec 9, 2018 at 8:39
The Json Response in question is not actually a JSON. Can you please provide a proper JSON, or sample of whatever you are getting as the response — Sachin Gupta
– Sachin Gupta, Commented Dec 9, 2018 at 8:44
Updated post, you didn't show the whole structure where everything was wrapped in a Table1 object — Lucho
– Lucho, Commented Dec 9, 2018 at 8:56

Sachin Gupta · Accepted Answer · 2018-12-09 08:52:16Z

1

Use data.Table1.forEach(image => this.urls.push(image.IMAGES)); to get the image URLs

answered Dec 9, 2018 at 8:52

Sachin Gupta

5,3493 gold badges19 silver badges33 bronze badges

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

5 Comments

Zhu Over a year ago

url : [object Object],[object Object],[object Object],[object Object],[object Object],localhost:49813/Images/Announcements/Church/Donation/…

Zhu Over a year ago

It returns all the five urls and five times [object object]

Sachin Gupta Over a year ago

Have you mapped the data object to any specific type? How are you accessing the urls ?

Sachin Gupta Over a year ago

If it has the urls (the values from the data), it means that the solution i provided was working fine and the urls may have some data before pushing these values. Can you please verify the same.

Zhu Over a year ago

Property 'Table1' does not exist on type 'Object'. so I changed it to data['Table1'].forEach(image => this.urls.push(image.IMAGES));

Evaldas Buinauskas · Accepted Answer · 2018-12-09 08:59:50Z

1

It would be better if you used a code rather than an image, but probably it should be enough to use a map method.

const data = JSON.parse(`{"Table":[{"S_NO":1,"AN_ID":37,"AN_TYPE":"Church","AN_TITLE":"Donation","AN_DATE":"2018-12-05T18:30:00","AN_STATUS":"Active","AN_DESC":"Test"}],"Table1":[{"IMAGES":"http://localhost:49813/Images/Announcements/Church/Donation/IMG_0914.JPG"},{"IMAGES":"http://localhost:49813/Images/Announcements/Church/Donation/IMG_0916.JPG"},{"IMAGES":"http://localhost:49813/Images/Announcements/Church/Donation/IMG_0917.JPG"},{"IMAGES":"http://localhost:49813/Images/Announcements/Church/Donation/IMG_0919.JPG"},{"IMAGES":"http://localhost:49813/Images/Announcements/Church/Donation/IMG_0921.JPG"}]}`);

const urls = data.Table1.map(i => i.IMAGES)

Works like a charm and brings this back:

["http://localhost:49813/Images/Announcements/Church/Donation/IMG_0914.JPG", "http://localhost:49813/Images/Announcements/Church/Donation/IMG_0916.JPG", "http://localhost:49813/Images/Announcements/Church/Donation/IMG_0917.JPG", "http://localhost:49813/Images/Announcements/Church/Donation/IMG_0919.JPG", "http://localhost:49813/Images/Announcements/Church/Donation/IMG_0921.JPG"]

edited Dec 9, 2018 at 8:59

answered Dec 9, 2018 at 8:25

Evaldas Buinauskas

14.2k11 gold badges63 silver badges119 bronze badges

3 Comments

Zhu Over a year ago

Property 'map' does not exist on type 'Object'. @ Property 'map' does not exist on type 'Object'.

Evaldas Buinauskas Over a year ago

It would be easier to help you if you posted your data as a code, not as a image.

Evaldas Buinauskas Over a year ago

Can you update it once more and post actual JSON object?

Lucho · Accepted Answer · 2018-12-09 08:51:53Z

0

It should be:

this.urls.push(data.Table1[i].IMAGES);

In your loop

edited Dec 9, 2018 at 8:51

answered Dec 9, 2018 at 8:24

Lucho

1,5471 gold badge13 silver badges26 bronze badges

2 Comments

Zhu Over a year ago

got the same url : [object Object],[object Object],[object Object],[object Object],[object Object] @Lucho

Lucho Over a year ago

What you get from console.log(this.urls[0])?

Kidas · Accepted Answer · 2018-12-09 10:01:34Z

class Test {
    public urls: string[] = [];
    public data: any = {
        "Table": [
            {
                "S_NO": 1,
                "AN_ID": 37,
                "AN_TYPE": "Church",
                "AN_TITLE": "Donation",
                "AN_DATE": "2018-12-05T18:30:00",
                "AN_STATUS": "Active",
                "AN_DESC": "Test"
            }
        ],
        "Table1": [
            { "IMAGES": "http://localhost:49813/Images/Announcements/Church/Donation/IMG_0914.JPG" },
            { "IMAGES": "http://localhost:49813/Images/Announcements/Church/Donation/IMG_0916.JPG" },
            { "IMAGES": "http://localhost:49813/Images/Announcements/Church/Donation/IMG_0917.JPG" },
            { "IMAGES": "http://localhost:49813/Images/Announcements/Church/Donation/IMG_0919.JPG" },
            { "IMAGES": "http://localhost:49813/Images/Announcements/Church/Donation/IMG_0921.JPG" }
        ]
    }

    constructor() {
        this.data.Table1.forEach((img: any) => this.urls.push(img.IMAGES));
    }
}

let t: Test = new Test();
console.log(JSON.stringify(t.urls));

Works like a charm for me:

Output > ["http://localhost:49813/Images/Announcements/Church/Donation/IMG_0914.JPG","http://localhost:49813/Images/Announcements/Church/Donation/IMG_0916.JPG","http://localhost:49813/Images/Announcements/Church/Donation/IMG_0917.JPG","http://localhost:49813/Images/Announcements/Church/Donation/IMG_0919.JPG","http://localhost:49813/Images/Announcements/Church/Donation/IMG_0921.JPG"]

you can test it : https://tsfiddle.tsmean.com/fiddle/MYer0EbO

Collectives™ on Stack Overflow

How to assign json response to a Array in Angular 4

4 Answers 4

5 Comments

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related