Читать JSON Значение в Javascript до нескольких уровней

Question

У меня есть массив 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 I l oop через массив выглядит следующим образом:

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

Это работает для JSON значения до уровня 1, т.е. это работает для идентификатора и имени. Я получаю идентификатор сотрудника и имя сотрудника правильно. Я получаю пустой вывод для "info.address". "info.address" читается как строка.

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

Answer 2

Я предлагаю ваши json как (*)

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('.')
   })

Answer 3

Пожалуйста, укажите ваш элемент как:

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

или:

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

согласно вашей логике c val ie и идентификатор должен быть таким же, чтобы найти заголовок.