html - 如何从 JSON 中提取其值为 true 的键

Question

我有以下 JSON，我想从中提取技能是真的。

[  
   {  
      "_id":"5de9f351baca28556c6a4b71",
      "Name":"Harsha",
      "Age":20,
      "Gender":"M",
      "Skills":{  
         "Java":"",
         "Mule":true,
         "Angular":""
      }
   },
   {  
      "_id":"5de9f358baca28556c6a4b72",
      "Name":"Anji",
      "Age":21,
      "Gender":"M",
      "Skills":{  
         "Java":"",
         "Mule":true,
         "Angular":true
      }
   },
   {  
      "_id":"5dea110297c2b65298b136e4",
      "Name":"Abhi",
      "Age":25,
      "Gender":"M",
      "Skills":{  
         "Java":"",
         "Mule":true,
         "Angular":""
      }
   }
]

我可以使用以下代码打印其余数据

<table *ngIf="formTemplate">
        <tr>
            <th *ngFor="let header of questionTitleArray" >{{header}}</th>
        </tr>

        <tr *ngFor="let data of surveyDataFromDB">
                <ng-container *ngFor="let head of questionTitleArray">
                <td>{{data[head]}}</td>         
        </ng-container>
        </tr>
    </table>

(这里的 JSON 是“surveyDataFromDB”)

下面是我得到的输出

Name    Age Gender  Skills
Harsha  20  M   [object Object]
Anji    21  M   [object Object]
Abhi    25  M   [object Object]

我想要真正的技能代替 [object Object]。请帮忙。

Answer 1

您可以先将对象映射为只有真实对象。您可以使用 lodash pickBy。

mappedSurveyDataFromDB = this.surveyDataFromDB.map(
    entry => ({...entry, Skills: _pickBy(entry.Skills, Boolean)}),
  );

像这样更改模板后:

<table>
  <tr>
    <th *ngFor="let header of questionTitleArray">{{ header }}</th>
  </tr>

  <tr *ngFor="let data of mappedSurveyDataFromDB">
    <ng-container *ngFor="let head of questionTitleArray">
      <td *ngIf="head !== 'Skills'">{{ data[head] }}</td>
      <td *ngIf="head === 'Skills'">
        <ng-container *ngFor="let entry of (data[head] | keyvalue); let last = last">
          {{ entry.key }}
          <ng-container *ngIf="!last">, </ng-container>
        </ng-container>
      </td>       
    </ng-container>
  </tr>
</table>

Blitz :https://stackblitz.com/edit/angular-ga7lqg