Question

在ngx数据表中，如何循环遍历ngx数据表中的嵌套Json对象。

json样本对象：

rows = [
{ name: 'Austin', gender: 'Male', company: 'Swimlane', topings:[
 { id:'101',name:'spinach'}]
 },
{ name: 'Dany', gender: 'Male', company: 'KFC',topings:[
 { id:'102',name:'onion'}] },
{ name: 'Molly', gender: 'Female', company: 'Burger King' ,topings:[
 { id:'103',name:'ginger'}]},

];

在ngx-datatable中，我如何循环遍历上述json对象中的顶部并在数据表中显示顶部数据。有人可以回答我该怎么做吗...... ??

Answer 1

好的，我在想的是，您需要对数据进行一些操作，然后才能将其呈现在数据表上。

首先，在component.ts上，应定义列。

tableColumns = [
  {
    prop: 'name',
    name: 'Name'
  },
  {
    prop: 'gender',
    name: 'Gender'
  },
  {
    prop: 'company',
    name: 'Company'
  },
  {
    prop: 'topingsId',
    name: 'Topings ID'
  }, 
  {
    prop: 'topingsName',
    name: 'Topings Name'
  }
]

接下来，您应该尝试对数据进行“扁平化”处理，使其成为一个单层对象数组（而不是嵌套它们）。

this.rows = [
  { 
    name: 'Austin', gender: 'Male', company: 'Swimlane', topings:[{ id:'101',name:'spinach'}]
  },
  { 
    name: 'Dany', gender: 'Male', company: 'KFC',topings:[{ id:'102',name:'onion'}] 
  },
  { 
    name: 'Molly', gender: 'Female', company: 'Burger King' ,topings:[{ id:'103',name:'ginger'}]
  }
];

this.rows = this.rows.map(row => ({
  name: row['name'],
  gender: row['gender'],
  company: row['company'],
  topingsId: row['topings'][0]['id'],
  topingsName: row['topings'][0]['name']
}));

console.log(this.rows);

最后但并非最不重要的是，您可以在component.html上这样呈现数据表：

<ngx-datatable class="material" [rows]="rows" [columns]="tableColumns"....></ngx-datatable>

不要忘记定义表所需的其他属性。

使用一些ES6魔术来分配行数据的其他方法。

1）使用Spread Syntax：

this.rows = this.rows.map(row => ({
  ...row,
  topingsId: row['topings'][0]['id'],
  topingsName: row['topings'][0]['name']
}));

2）同时使用扩展语法和Object Destructuring：

this.rows = this.rows.map(row => {
  const {topings, ...others} = row;
  return {
    ...others,
    topingsId: row['topings'][0]['id'],
    topingsName: row['topings'][0]['name']
  };
});

要回答您对评论的问题，我们的数据表行和列是动态的，我们必须采用略有不同的策略。

首先，我们将您的数据平整为一系列未嵌套的对象。我们为每行获取一个数组，然后将其转换为对象。之后，我们使用扩展语法将所有内容连接到一个对象中，该对象表示this.rows中的一行。

请注意，我们正在使用Computed Property Names（还有另一个ES6功能）来提供每个拓扑的动态属性键。

this.rows = this.rows.map(row => {
  const {topings, ...others} = row;
  const topingsList = topings.map((toping, index) => ({
    ['toping' + Number(index + 1) + ' Name']: toping['name']
  }));
  topingsObject = Object.assign({}, ...topingsList);
  return { 
    ...others,
    ...topingsObject
  }
});

接下来，我们必须从行数据中收集新列的数组，这是ngx-datatable的必需属性之一。首先，我们的this.tableColumns定义如下：

tableColumns = [
  {
    prop: 'name',
    name: 'Name'
  },
  {
    prop: 'gender',
    name: 'Gender'
  },
  {
    prop: 'company',
    name: 'Company'
  }
];

在获得扁平化的this.rows之后，我们将获得行数据中可用的属性数组。从那里，我们使用动态浇头（例如，Toping1名称，Toping2名称，.. etc）更新tableColumns

this.rows = this.rows.map(row => { .....}) // continued from the above

const headerNames = Object.keys(Object.assign({}, ...this.rows));
headerNames.map(header => {
  if (header!=='name' && header!=='gender' && header!=='company') {
    this.tableColumns.push({
      prop: header,
      name: header
    });
  }
});

Answer 2

嗯，我认为有一种更简单的方法，是的，它非常简单。只需执行以下操作：

假设您有一个嵌套的json对象，如下所示：

    data = {
        "id": 1,
        "name": "John Doe"
        "comments": [
            {"id":1, "content": "Some content" },
            {"id":2, "content": "Some content" }
        ]
    };

在您的HTML模板中：

<ngx-datatable-column name="Comment" prop="comments">
    <ng-template let-value="value" ngx-datatable-cell-template>
        <span>{{value.content}}</span>
    <ng-template>  
</ngx-datatable-column>

ngx-data table如何在angualr -6中的数据表中显示嵌套的json数据

2 个答案: