Question

我对angular 4还是陌生的，在这里我需要使用API响应并将其设置为数组。

但是在我的情况下，它返回[object object]。

JSON响应格式：

{
  "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']);
      }

但是它返回[object object]。有人可以帮我解决这个问题。

Answer 1

使用代码而不是图像会更好，但是使用map方法可能就足够了。

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)

像魅力一样工作，并将其带回：

["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"]

Answer 2

使用data.Table1.forEach(image => this.urls.push(image.IMAGES));获取图片网址

Answer 3

应该是：

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

在您的循环中

Answer 4

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));

对我来说就像一个魅力：

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"]

您可以对其进行测试：https://tsfiddle.tsmean.com/fiddle/MYer0EbO

如何在Angular 4中将json响应分配给数组

4 个答案: