如何将json响应分配给Angular 4中的数组答案

【问题标题】：How to assign json response to a Array in Angular 4如何将json响应分配给Angular 4中的数组
【发布时间】：2025-12-10 14:30:01
【问题描述】：

我是 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]。谁能帮我解决这个问题。

【问题讨论】：

看起来你的 JSON 结构不是你想的那样，你能通过手动输入来发布正确的结构吗？
如果你在浏览器开发工具中 console.log 会更容易，因为它看起来和之前的图像一样
有问题的 Json 响应实际上不是 JSON。您能否提供一个正确的 JSON，或者您得到的任何响应样本
请查看更新后的帖子@Sachin Gupta
更新后的帖子，您没有显示所有内容都包含在 Table1 对象中的整个结构

标签： angular typescript angular6

【解决方案1】：

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

【讨论】：

url : [object Object],[object Object],[object Object],[object Object],[object Object],localhost:49813/Images/Announcements/Church/Donation/…
它返回所有五个url和五次[object object]
您是否将data 对象映射到任何特定类型？您如何访问urls？
如果它有 url（来自数据的值），这意味着我提供的解决方案工作正常，urls 在推送这些值之前可能有一些数据。能否请您验证一下。
“对象”类型上不存在属性“表 1”。所以我把它改成了 data['Table1'].forEach(image => this.urls.push(image.IMAGES));

【解决方案2】：

如果您使用代码而不是图像会更好，但使用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"]

【讨论】：

“对象”类型上不存在属性“地图”。 @“对象”类型上不存在属性“地图”。
如果您将数据发布为代码而不是图像，会更容易为您提供帮助。
你能再更新一次并发布实际的 JSON 对象吗？

【解决方案3】：

应该是：

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

在你的循环中

【讨论】：

得到相同的 url : [object Object],[object Object],[object Object],[object Object],[object Object] @Lucho
你从 console.log(this.urls[0]) 得到了什么？

【解决方案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

【讨论】：