在 Angular2 中迭代 JSON 中的 JSON答案

【问题标题】：Iterating the JSON inside JSON in Angular2在 Angular2 中迭代 JSON 中的 JSON
【发布时间】：2018-04-18 09:43:15
【问题描述】：

嗨，我对 angular2 很陌生，我想在 JSON 对象中迭代 JSON 我的 JSON 如下所示

{"items":[{"id":564,"sku":"MB570Z\/B","name":"Mini DisplayPort to DVI Adapter","attribute_set_id":4,"price":2800,"status":1,"visibility":4,"type_id":"simple","created_at":"2017-08-31 04:49:57","updated_at":"2017-08-31 05:06:31","weight":1,"extension_attributes":[],"product_links":[],"tier_prices":[],"custom_attributes":[{"attribute_code":"description","value":"Every Mac with a Mini DisplayPort allows you to connect an external display or projector using an adapter. You can use an external display as your main workspace or to extend your desktop, or you can work in mirrored mode with a projector so you can view what your audience sees.\r\nUse the Mini DisplayPort to DVI Adapter to connect an advanced digital monitor, such as the 20- or 23-inch Apple Cinema Display, that includes a DVI connector. Review the documentation or check with the manufacturer of your monitor to make sure you're choosing the right adapter."},{"attribute_code":"short_description","value":"Mini DisplayPort to DVI Adapter"},{"attribute_code":"image","value":"\/m\/i\/mini_displayport_to_dvi_adapter.jpg"},{"attribute_code":"small_image","value":"\/a\/p\/apple_hdmi_to_dvi_adapter.jpg"},{"attribute_code":"thumbnail","value":"\/a\/p\/apple_hdmi_to_dvi_adapter.jpg"},{"attribute_code":"options_container","value":"container2"},{"attribute_code":"required_options","value":"0"},{"attribute_code":"has_options","value":"0"},{"attribute_code":"url_key","value":"mini-displayport-to-dvi-adapter"},{"attribute_code":"msrp_display_actual_price_type","value":"0"},{"attribute_code":"tax_class_id","value":"2"},{"attribute_code":"gift_message_available","value":"0"},{"attribute_code":"is_featured","value":"0"},{"attribute_code":"gst_source","value":"28"},{"attribute_code":"hsncode","value":"85444299"},{"attribute_code":"gst_source_after_minprice","value":"-1"}]},{"id":565,"sku":"MB571Z\/A","name":"Mini DisplayPort to Dual-Link DVI Adapter","attribute_set_id":4,"price":9400,"status":1,"visibility":4,"type_id":"simple","created_at":"2017-08-31 04:49:58","updated_at":"2017-08-31 05:06:31","weight":1,"extension_attributes":[],"product_links":[],"tier_prices":[],"custom_attributes":[{"attribute_code":"description","value":"Every Mac with a Mini DisplayPort allows you to connect an external display or projector using an adaptor. You can use an external display as your main workspace or to extend your desktop, or you can work in mirrored mode with a projector so you can view what your audience sees.\nUse the Mini DisplayPort to Dual-Link DVI Adaptor to connect your Mac to a 30-inch display that includes a DVI connector, such as the 30-inch Apple Cinema Display HD, and enjoy the ultimate widescreen canvas with a resolution of 2560 by 1600 pixels."},{"attribute_code":"short_description","value":"Mini DisplayPort to Dual-Link DVI Adapter"},{"attribute_code":"image","value":"\/m\/i\/mini_displayport_to_dual-link_dvi_adapter.jpg"},{"attribute_code":"small_image","value":"\/m\/i\/mini_displayport_to_dual-link_dvi_adapter.jpg"},{"attribute_code":"thumbnail","value":"\/m\/i\/mini_displayport_to_dual-link_dvi_adapter.jpg"},{"attribute_code":"options_container","value":"container2"},{"attribute_code":"required_options","value":"0"},{"attribute_code":"has_options","value":"0"},{"attribute_code":"url_key","value":"mini-displayport-to-dual-link-dvi-adapter"},{"attribute_code":"msrp_display_actual_price_type","value":"0"},{"attribute_code":"tax_class_id","value":"2"},{"attribute_code":"gift_message_available","value":"0"},{"attribute_code":"is_featured","value":"0"},{"attribute_code":"gst_source","value":"28"},{"attribute_code":"hsncode","value":"85444299"},{"attribute_code":"gst_source_after_minprice","value":"-1"}]}],"search_criteria":{"filter_groups":[],"page_size":2},"total_count":91}

【问题讨论】：

“迭代”到底是什么意思？您的意思是在 UI 中显示列表（ng-repeat）？
是的，但是 Ng-repeat 不起作用 *ngFor 对我有用。但我只想在我的 UI 中显示描述。
你的意思是要迭代items里面“custom_attributes”中的数据吗？
是但不是所有“值”的唯一第一个“值”。

标签： angular2-routing angular2-forms angular2-directives

【解决方案1】：

您需要执行以下操作：

<div *ngFor="let item of items">
   // you can access your item here for example
  <h1>item.id</h1>
   // and you can loop again
  <div *ngFor="let temp of item.custom_attributes">
   <p> temp.attribute_code</p>
  </div>
</div>

您可以使用 *ngFor 遍历对象数组

【讨论】：

我只想要 custom_attribute 的“价值”而不是 attribute_code。你能为此提出任何建议吗？
抱歉信息有误，我想要 custom_attribute 中的第一个“值”。
您可以从 custom_attributes 访问您想要的内容。你说的第一个值是什么意思？ (custom_attributes[0] ?)

【解决方案2】：

在你的 component.js 中，

 private myItems:any = [];

constructor(){
}

yourFunction(){
  let vm = this;
  items.forEach(function(val: any){
    val.custom_attributes.forEach(function(myAttrs: any){
      vm.myItems.push({
        "code": myAttrs.attribute_code,
        "description": myAttrs.value
      });
    });
  });
}

在你的 html 文件中

<div *ngFor="let myItem of myItems">
  <p> Code: {{myItem.code}} </p>
  <p> Description : {{myItem.description}}
</div>

【讨论】：