Таблица данных ngx, как отобразить вложенные данные json в таблице данных в angualr -6 - PullRequest
Новая
       20

Таблица данных ngx, как отобразить вложенные данные json в таблице данных в angualr -6

2 голосов
/ 21 марта 2019

В таблице ngx-данных, как пройти через вложенный объект Json в таблице данных ngx.

Пример объекта json: 

rows = [
{ name: 'Austin', gender: 'Male', company: 'Swimlane', topings:[
 { id:'101',name:'spinach'}]
 },
{ name: 'Dany', gender: 'Male', company: 'KFC',topings:[
 { id:'102',name:'onion'}] },
{ name: 'Molly', gender: 'Female', company: 'Burger King' ,topings:[
 { id:'103',name:'ginger'}]},

];

В ngx-datatable, как мне нужно перебрать topings в вышеупомянутом объекте json и отобразить данные toping в таблице данных.Может ли кто-нибудь ответить, пожалуйста, как я должен это сделать .... ??

1 Ответ

2 голосов
/ 22 марта 2019

Хорошо, я думаю, что вам нужно будет сделать некоторые манипуляции с вашими данными, прежде чем вы сможете отобразить их в своей базе данных.

В ваших component.ts, во-первых, вы должны определить ваши столбцы. 

tableColumns = [
  {
    prop: 'name',
    name: 'Name'
  },
  {
    prop: 'gender',
    name: 'Gender'
  },
  {
    prop: 'company',
    name: 'Company'
  },
  {
    prop: 'topingsId',
    name: 'Topings ID'
  }, 
  {
    prop: 'topingsName',
    name: 'Topings Name'
  }
]

Затем вы должны попытаться «сгладить» ваши данные так, чтобы они представляли собой массив одноуровневых объектов (вместо того, чтобы их вкладывать). 

this.rows = [
  { 
    name: 'Austin', gender: 'Male', company: 'Swimlane', topings:[{ id:'101',name:'spinach'}]
  },
  { 
    name: 'Dany', gender: 'Male', company: 'KFC',topings:[{ id:'102',name:'onion'}] 
  },
  { 
    name: 'Molly', gender: 'Female', company: 'Burger King' ,topings:[{ id:'103',name:'ginger'}]
  }
];

this.rows = this.rows.map(row => ({
  name: row['name'],
  gender: row['gender'],
  company: row['company'],
  topingsId: row['topings'][0]['id'],
  topingsName: row['topings'][0]['name']
}));

console.log(this.rows);

И последнее, но не менее важное: в вашем component.html вы можете сделать так, чтобы ваши данные были такими: 

<ngx-datatable class="material" [rows]="rows" [columns]="tableColumns"....></ngx-datatable>

И не забудьте определить другие свойства, которые понадобятся вашей таблице.

Дополнительные способы назначения данных строк с использованием некоторой магии ES6.

1) Использование синтаксиса Spread : 

this.rows = this.rows.map(row => ({
  ...row,
  topingsId: row['topings'][0]['id'],
  topingsName: row['topings'][0]['name']
}));

2) Использование синтаксиса распространения и разрушения объектов : 

this.rows = this.rows.map(row => {
  const {topings, ...others} = row;
  return {
    ...others,
    topingsId: row['topings'][0]['id'],
    topingsName: row['topings'][0]['name']
  };
});

И чтобы ответить на ваш вопрос о комментариях, наши строки данных и столбцы являются динамическими, мы должны принять немного другую стратегию.

Во-первых, мы сравним ваши данные с массивом неопубликованных объектов. Мы получаем массив значений для каждой строки, а затем преобразуем массив в объект. После чего мы используем синтаксис распространения, чтобы объединить все в один объект, который представляет строку в this.rows.

Обратите внимание, что мы используем Вычисляемые имена свойств (еще одна особенность ES6), чтобы предоставить ключ динамического свойства каждой вершины. 

this.rows = this.rows.map(row => {
  const {topings, ...others} = row;
  const topingsList = topings.map((toping, index) => ({
    ['toping' + Number(index + 1) + ' Name']: toping['name']
  }));
  topingsObject = Object.assign({}, ...topingsList);
  return { 
    ...others,
    ...topingsObject
  }
});

Далее, из данных строк мы должны собрать массив новых столбцов, который является одним из обязательных свойств ngx-datatable. Во-первых, наш this.tableColumns определяется так: 

tableColumns = [
  {
    prop: 'name',
    name: 'Name'
  },
  {
    prop: 'gender',
    name: 'Gender'
  },
  {
    prop: 'company',
    name: 'Company'
  }
];

И сразу после получения сглаженного this.rows мы получим массив свойств, доступных в данных строки. Оттуда мы обновляем tableColumns динамическими наполнителями (например, имя Toping1, имя Toping2, ..etc) 

this.rows = this.rows.map(row => { .....}) // continued from the above

const headerNames = Object.keys(Object.assign({}, ...this.rows));
headerNames.map(header => {
  if (header!=='name' && header!=='gender' && header!=='company') {
    this.tableColumns.push({
      prop: header,
      name: header
    });
  }
});
...