遍历Angular2中json对象的键答案

【问题标题】：Iterating through the keys of a json object in Angular2遍历Angular2中json对象的键
【发布时间】：2018-09-23 14:15:21
【问题描述】：

我收到这样的 JSON 响应：-

{
  "status": 1,
  "message": "Data found",
  "list": [
    {
      "id": "1",
      "title": "First Data"
    },
    {
      "id": "2",
      "title": "Second Data"
    }
  ],
  "total": 3,
  "current_page": "1",
  "error": 0
}

在组件文件中，我像这样存储list obj：-

viewPage(page,per_page){  
  this._adminPage.fetchAdminPageData(page, per_page).subscribe(
      data => {
            this.list = data.list;
            this.total_item = data.total;
            this.current_page = data.current_page;
            this.arrayOfKeys = Object.keys(this.list);
            //this.setPage(1);
          },
      err => {
            console.log(err)
          },
      () => {}
    ); 
  this.status = true;       
}

使用this.arrayOfKeys = Object.keys(this.list); 我得到list 的密钥。

当我在 html {{arrayOfKeys}} 中打印它时，我得到这样的数据 0,1

我想遍历 list[0] 的键，并在表头中显示每个键的名称。有东西链接这个：-

<thead>
  <tr>
   <th *ngFor='let key of arrayOfKeys'>[here goes the name of the key ie. id/title/etc]</th>
  </tr>
</thead>

这意味着，如果我的键是 id 和 title，那么表格标题将显示 id 和 title。如果我的键是 f_name 和 l_name，那么表头将显示 f_name 和 l_name。

我怎样才能做到这一点？

【问题讨论】：

你可以使用this.arrayOfKeys=Object.keys(list[0]);
list的每个数组元素中的键数是否相同？
这取决于 API。可以修改 API 以发送更多或更少的密钥
如果您正在寻找，请查看我的答案。

标签： angular

【解决方案1】：

如果每个数组元素的键数相同，您可以使用this.arrayOfKeys=Object.keys(list[0]);。如果您使用Object.keys(list);，它只会为您提供数组索引。您可以检查以下代码 -

viewPage(page,per_page){  
  this._adminPage.fetchAdminPageData(page, per_page).subscribe(
      data => {
            this.list = data.list;
            this.total_item = data.total;
            this.current_page = data.current_page;
            this.arrayOfKeys=Object.keys(list[0]); //["id", "title"]
            //this.setPage(1);
          },
      err => {
            console.log(err)
          },
      () => {}
    ); 
  this.status = true;       
}

然后在 HTML 中使用它

<thead>
  <tr>
   <th *ngFor='let key of arrayOfKeys'>{{key}}</th>
  </tr>
</thead>

【讨论】：

这是准确的答案。谢谢。
当然。就放点时间吧。 10 分钟前无法接受答复

【解决方案2】：

如果所有对象的键都是相同的并且存在，您就可以侥幸逃脱：

const keys = Object.keys(data.list[0]);

如果没有，您可以聚合所有对象的键，例如使用一个迭代器Set：

const data = {
  "status": 1,
  "message": "Data found",
  "list": [{
      "id": "1",
      "title": "First Data"
    },
    {
      "id": "2",
      "title": "Second Data"
    }
  ],
  "total": 3,
  "current_page": "1",
  "error": 0
};

const keys = Array.from(data.list.reduce((a, v) => {
  Object.keys(v).forEach(k => a.add(k));
  return a;
}, new Set()));

console.log(keys);

【讨论】：

【解决方案3】：

将Object.keys() 方法从组件公开到您的模板：

public objKeys = Object.keys;

所以你可以遍历键：

<div *ngFor="let key of objKeys(yourObject)">{{key}}</div>

【讨论】：

详细解释