首页 文章

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

提问于
浏览 次
0

我是angular 4的新手，在这里我需要使用API响应并将其设置为数组 .

但在我的情况下，它返回[对象对象] .

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] . 任何人都可以帮我解决这个问题 .

angular typescript angular6

4 回答

  • 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"]
    回复于
  • 0

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

    回复于
  • 1

    它应该是：

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

    在你的循环中

    回复于
  • 0
    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

    回复于

相关问题