时间戳

首页 > 解决方案 > Angular2在组件中迭代JSON

angular - Angular2在组件中迭代JSON

问题描述

我正在尝试使用不同的数据迭代 JSON。

我正在使用 Angular2，Ag-grid Master detail，模板在 detailCellRendererParams：

当我尝试迭代我的 JSON 以获取数据时，我遇到了问题。

 ngOnInit() {
    this.gridOptions = <GridOptions>{};
    this.detailCellRendererParams = {
      detailGridOptions: {
        onGridReady: function(params) {
          params.api.sizeColumnsToFit();
        }
      },

      getDetailRowData: function(params) {},

  template: function(params) {
    console.log('before');
    console.log('datas ', params.data.masterdetail);
    for (const valor of params.data.masterdetail) {
      console.log('eyy');
      if (params.data.masterdetail.hasOwnProperty(valor)) {
        console.log('este valor es : ', valor);
      }
    }
    console.log('after');
    // console.log('template ', params.data.masterdetail);
    return '<div class="aggrid--full-row-container">' + '<div ref="eDetailGrid" </div>' + 'asereje ' + '</div>';
  }
 };
}

永远不要加入...

在此处输入图像描述

你可以看到我是如何获取4数据的 console.log('datas ', params.data.masterdetail);

新代码更新：

 console.log('before');
 console.log('datas ', params.data.masterdetail);
 const objects = JSON.parse(params.data.masterdetail);
    for (const obj of objects) {
      const keys = Object.keys(obj);
      keys.forEach(key => {
        console.log(obj[key]);
      });
    }
    console.log('after');

错误：

ERROR SyntaxError: Unexpected token o in JSON at position 1
at JSON.parse (<anonymous>)
at template (projectunits.component.ts:43)
at DetailCellRenderer.webpackJsonp../node_modules/ag-grid-enterprise/dist/lib/rendering/detail/detailCellRenderer.js.DetailCellRenderer.selectAndSetTemplate (detailCellRenderer.js:96)
at DetailCellRenderer.webpackJsonp../node_modules/ag-grid-enterprise/dist/lib/rendering/detail/detailCellRenderer.js.DetailCellRenderer.init (detailCellRenderer.js:33)
at ComponentResolver.webpackJsonp../node_modules/ag-

在此处输入图像描述

我得到这个数据是 un file.json。构造我的 Json：

{

 "headers": [ 
   "headerName": "asdasd",
 ],   //end headers

  "datas": [

  "idaam": "11",
  "idorigen": "11",

   "masterdetail": {
        "child1": {
          "name": "I AM",
          "age": "1"

        },

        "child2": {
          "name": "YOU ARE",
          "age": "2"
        },

        "child3": {
        "name": "HE IS",
        "age": "3"
        },
    } //end masterdetail
  ]//end datas

}//end JSON

标签： angularag-grid

解决方案

这是我的答案。您可以在解析之前检查数据是对象还是简单的字符串。此代码假定您确定您获得的是 JSON 而不是 Array

const objects = (typeof params.data.masterdetail == 'object') ?  JSON.parse(params.data.masterdetail) : params.data.masterdetail;
for (const obj in objects) {
  const data = objects[obj];
  //Bellow if each attribute data
}

推荐阅读