遍歷Angular2中json對象的鍵

Question

我收到這樣的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 。

我該如何實現？

Answer 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>

Answer 2

如果所有對象都具有相同的鍵並且都存在，則可以使用以下方法：

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

如果不是，則可以聚合所有對象的鍵，例如使用itermediate 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); 

Answer 3

將Object.keys()方法從組件公開到模板：

public objKeys = Object.keys;

因此，您可以遍歷鍵：

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