在 Javascript 中读取 JSON 值到多个级别答案

【问题标题】：Read JSON Value in Javascript upto multiple levels在 Javascript 中读取 JSON 值到多个级别
【发布时间】：2020-01-27 13:37:04
【问题描述】：

我有一个 JSON 对象数组，如下所示：

columns: [{
    id: 'id',
    header: 'Employee ID',
    value: 'id'
  },
  {
    id: 'name',
    header: 'Employee Name',
    value: 'name'
  },
  {
    id: 'address',
    header: 'Employee address',
    value: 'info.address'
  },
]

在 HTML 文件中，我循环遍历数组如下：

    <ng-container *ngFor="let eachCol of columns" matColumnDef="{{eachCol.id}}">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{eachCol.header}}</th>
      <td mat-cell *matCellDef="let row">
         {{ row[eachCol.value] }}
      </td>
    </ng-container>

这适用于最高级别 1 的 JSON 值，即它适用于 id 和 name。我正确地获得了员工 ID 和员工姓名。我得到“info.address”的空输出。 "info.address" 被读取为字符串。

【问题讨论】：

您无法访问地址 info.address 之类的属性。你所做的相当于row["info.address"]，而不是分层搜索，而是直接查找属性info.address。

标签： javascript json angular angular-material

【解决方案1】：

我想你可以做一个指令或函数来做你想做的事：

function pathToValue(obj, path) {
    const parts = path.split(".");
    let currentValue = obj;

    for(let i=0; i<parts.length; i++) {
        if (currentValue.hasOwnProperty(parts[i])) {
            currentValue = currentValue[parts[i]];
        }
    }

    return currentValue;
}

并在您的模板中使用它：

{{ pathToValue(row, eachCol.value) }}

【讨论】：

【解决方案2】：

请提及您的元素，例如：

{
    id: 'info.address',
    header: 'Employee address',
    value: 'info.address'
  }

或：

{
    id: 'address',
    header: 'Employee address',
    value: 'address'
  }

根据您的逻辑，valie 和 id 应该相同以定位标题。

【讨论】：

【解决方案3】：

我建议你的 json like(*)

columns: [{
    id: 'id',
    header: 'Employee ID',
    value: ['id']
  },
  {
    id: 'name',
    header: 'Employee Name',
    value: ['name']
  },
  {
    id: 'address',
    header: 'Employee address',
    value: ['info','address']
  },
]

和

{{eachCol.value.length==1?
     row[eachCol.value[0]]:
     row[eachCol.value[0]][eachCol.value[1]]}}

(*) 只能使用

   this.columns.forEach(x=>{
      x.value=x.value.split('.')
   })

【讨论】：

假设我有一个多层次的 JSON，{ id: 'address', header: 'Employee address', value: ['info','address', 'street', ...] }, 有没有办法循环遍历数组？
然后，看看 Tim 的答案——或者其他类似的函数——在 .html 插值中你可以使用少量的运算符。也许创建一个自定义管道。