在 Angular 中向 JSON 响应添加新的对象属性答案

【问题标题】：Add new object property to JSON response in Angular在 Angular 中向 JSON 响应添加新的对象属性
【发布时间】：2017-05-08 07:31:29
【问题描述】：

我正在尝试将新的对象属性添加到我的 JSON 响应中。

我的 JSON 响应示例

{
    "products": [{
        "id": 1,
        "name": "xyz"
    }]
}

获取响应后需要将新的对象属性（显示）添加到相同的 JSON 响应中

{
    "products": [{
        "id": 1,
        "name": "xyz",
        "show": false
    }]
}

这是我的示例代码

import {Component,OnInit} from '@angular/core';
    import {Http, Response} from '@angular/http';
    import 'rxjs/Rx';
    @Component({
      templateUrl:'./electronics.html'
    })
    export class electronicsComponent{
      productListElectronics={};
        productListElectronicResponse: Object;
        error:Object;
        constructor(private http: Http) {
          this.productListElectronicResponse={};
            this.error={};
            http.get('../json/electronics/electronics.json').map((res: Response) =>res.json()).subscribe(res =>
              {

                for(var i = 0; i <= res['products'].length; i++){
                    res['products'][i].show=false;
                  }
                  console.log(res);
           }, error => this.error = error );
      }
    }

但控制台不断抛出以下错误：

ERROR TypeError: Cannot set property 'show' of undefined
    at SafeSubscriber.http.get.map.subscribe._this.error [as _next] (products.component.ts:22)
    at SafeSubscriber.__tryOrUnsub (Subscriber.ts:238)
    at SafeSubscriber.next (Subscriber.ts:190)
    at Subscriber._next (Subscriber.ts:135)
    at Subscriber.next (Subscriber.ts:95)
    at MapSubscriber._next (map.ts:80)
    at MapSubscriber.Subscriber.next (Subscriber.ts:95)
    at XMLHttpRequest.onLoad (xhr_backend.ts:104)
    at ZoneDelegate.invokeTask (zone.js:398)
    at Object.onInvokeTask (ng_zone.ts:253)
    at ZoneDelegate.invokeTask (zone.js:397)
    at Zone.runTask (zone.js:165)
    at XMLHttpRequest.ZoneTask.invoke (zone.js:460)

【问题讨论】：

在有问题的行上放一个断点，等待它到达那里，然后是i或res['products'][i]等示例值。

标签： javascript angular typescript angular2-services

【解决方案1】：

你的错误在这里

 for(var i = 0; i <= res['products'].length; i++)

应该是

for(var i = 0; i <res['products'].length; i++)

https://jsfiddle.net/rt6LjvLa/

【讨论】：

如果打字错误有一个密切的原因，那就太好了。哦，等一下，有。

【解决方案2】：

这应该适用于遍历您的对象数组：

for(var key in res['products']){

    res['products'][key].show=false;

}

小提琴：https://jsfiddle.net/echonax/dm1d0vyw/

【讨论】：

使用for...in 遍历数组通常是不被接受的。
@torazaburo 如果键不是索引，你还要如何遍历对象？
对于数组，键是（几乎总是）索引。
@torazaburo 啊现在我看到 in 也会遍历原型键。谢谢提醒。

【解决方案3】：

可能性一：

从 <= 中删除 = 从 for 循环，否则它将为未定义的对象再运行一次。

for(var i = 0; i < res['products'].length; i++){
    res['products'][i].show=false;
}

上面的解决方案不起作用，然后尝试下面的可能性 2

我怀疑res['products'] 返回一个json array。

运行下面的代码行并在此处附加您的结果：

console.log(res['products'])
for(var i = 0; i <= res['products'].length; i++){
    console.log(res['products'][i]);
    res['products'][i].show=false;
}

【讨论】：