Javascript 迭代对象，直到找到与标签匹配的值

在我的angular项目中，我通过动态方式操纵表格。当我这样做时，我在数据节点中遇到了一个挑战。这些值可以直接使用，工作正常

有时是对象下的值或对象的子对象。所以我需要迭代数据，直到有一个值匹配为止。如果没有值，就让它为空

如何做到这一点

ts文件：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  columns = [{
    title:"NAME",
    data:"name"
  },
  {
    title:"CITY",
    data:"city"
  }];

  datas = [
    {
      name:"US",
      city:"Newyork"
    },
     {
       name:"Japan",
       parent: {
         first: {
           city:"Tokyo"
         }
       }
    },
     {
      name:"UK",
      parent: {
        city:"London"
      }
    }
  ];

  getData(data, label) {
    if(!data[label]) {
      console.log(data, label) //how to do all the way with data?
    }
    return data[label]
  }
}


HTML:

<table>
  <tbody>
    <th *ngFor="let col of columns">{{col.title}}</th>
  </tbody>
  <tbody>
    <tr *ngFor="let data of datas">
      <td *ngFor="let col of columns">{{getData(data, col.data)}}</td>
    </tr>
  </tbody>
</table>

从'@angular/core'导入{Component}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
列=[{
标题：“姓名”，
数据：“名称”
},
{
标题：“城市”，
数据：“城市”
}];
数据=[
{
名称：“美国”，
城市：“纽约”
},
{
名称：“日本”，
家长：{
第一:{
城市：“东京”
}
}
},
{
名称：“英国”，
家长：{
城市：“伦敦”
}
}
];
getData（数据、标签）{
如果（！数据[标签]）{
console.log（数据，标签）//如何处理数据？
}
返回数据[标签]
}
}
HTML:
{{col.title}}
{{getData（data，col.data）}

---

您必须以所需格式解析

此.data

，以便在

for

循环中使用它

下面的函数

getCity（）

递归循环并查找城市值。

函数getCity（obj）{
if（对象城市）{
返回obj.city；
}
用于（obj中的var x）{
if（对象的类型[x]=“对象”）{
返回此.getCity（obj[x]）；
}
}
返回“未找到”；
}
变量obj1={
名称：“英国”，
家长：{
城市：“伦敦”
}
}
变量obj2={
名称：“日本”，
家长：{
第一:{
城市：“东京”
}
}
}
console.log（getCity（obj1））；
console.log（getCity（obj2））；
console.log（getCity（{}））

Bharath，当我知道数据需求时，您的解决方案仍然有效。我的应用程序由cms维护。所以我不知道数据值。即使在将来，列值也可以作为动态更新。所以服务器将决定这是为了了解requirementmake

getCity（）

generic（）的上下文，以便它可以返回动态键的值