Конвертировать массив объектов для формирования данных в табличном формате

Question

У меня есть следующий массив объектов:

[
  {
    "userId": 1,
    "id": 1,
    "title": "delectus aut",
    "completed": false
  },
  {
    "userId": 1,
    "id": 2,
    "title": "quis ut",
    "completed": false
  }
]

Я хочу следующее в качестве вывода:

userId | id | title       | completed |
  1    | 1  | delectus aut| false     |
  1    | 2  | quis ut     | false     |

Я пытался следовать, используя lodash , но почему-то я чувствую, что у нас есть лучшее решение, чем это, учитывая количество циклов:

jsonObject = response; // consider the above mention object here.  
keys = _.keys(json[0]); 

Здесь я обнаружил, что json[0] не во всех случаях будет одинаковым, так что как лучше всего найти решение для этого?

Любая помощь будет оценена !!!

Answer 1

Вдохновленный решением @ Akrion, вот модифицированная версия.

Немного длинное решение, но это поможет вам, если:

1. У вас есть разные ключи в ваших данных JSON
2. У вас есть другая последовательность клавиш в объекте
3. Хотите установить значение по умолчанию, если данные недоступны

const json = [
  {
    "userId": 1,
    "id": 1,
    "title": "delectus aut",
    "completed": true
  },
  {
    "completed": false,
    "userId": 1,
    "title": "quis ut",
    "id": 2,
    "extraProp": "test"
  },
];

const headers = Array.from(new Set(json.reduce((acc, cur) =>
  [...acc, ...Object.keys(cur)], [])));

const data = [headers];
const defaultValue = 'NA';

json.forEach(item => {
  data.push(headers.reduce((acc, header) =>
    acc.push(item.hasOwnProperty(header) ? item[header] : defaultValue) && acc, []));
});
console.log(data);

Stackblitz Link: https://stackblitz.com/edit/js-zyh1ps

Answer 2

Вы также можете сделать это довольно простым способом с ES6 и без всяких проблем с Array.reduce :

let data = [{ "userId": 1, "id": 1, "title": "delectus aut", "completed": false }, { "userId": 1, "id": 2, "title": "quis ut", "completed": false } ]

let result = data.reduce((acc,cur) => 
   acc.push(Object.values(cur)) && acc, [Object.keys(data[0])])

console.log(result)

Если вы установили в качестве начального значения аккумулятора массив Object.keys , то все, что вам нужно, это нажать на этот аккумулятор Object.values ​​ каждой итерации в массиве.Если ваш заголовок не всегда находится в первой строке, просто укажите его как массив значений и т. Д.

let data = [{ "userId": 1, "id": 1, "title": "delectus aut", "completed": false }, { "userId": 1, "id": 2, "title": "quis ut", "completed": false } ]

let hdr = ["userId", "id", "title", "completed"]
let result = data.reduce((acc,cur) => acc.push(Object.values(cur)) && acc, [hdr])

console.log(result)

Answer 3

Поскольку вам нужны определенные столбцы в определенном порядке, вы должны определить массив ключей и использовать _.map() и _.pick(), чтобы получить значения в правильном порядке от объекта. После этого объедините массив значений в массив ключей:

const { flow, partialRight: pr, map, at, partial, concat, join } = _

const fn = keys => flow(
  pr(map, o => at(o, keys)),
  partial(concat, [keys]),
)

const keys = ['userId', 'id', 'title', 'completed']

const data = [{"userId":1,"id":1,"title":"delectus aut","completed":false},{"userId":1,"id":2,"title":"quis ut","completed":false}]

const result = fn(keys)(data)

console.log(result)

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>

И более краткая версия lodash / fp:

const { flow, map, at, concat, join } = _

const fn = keys => flow(
  map(at(keys)),
  concat([keys]),
)

const keys = ['userId', 'id', 'title', 'completed']

const data = [{"userId":1,"id":1,"title":"delectus aut","completed":false},{"userId":1,"id":2,"title":"quis ut","completed":false}]

const result = fn(keys)(data)

console.log(result)

<script src='https://cdn.jsdelivr.net/g/lodash@4(lodash.min.js+lodash.fp.min.js)'></script>

Answer 4

Сначала получите заголовок таблицы:

let firstObject = array[0];
let header = Object.keys(firstObject);

Теперь у вас есть ключи в объекте заголовка.

Используйте map или forEach в массиве и сохраните его впеременная.

let tableValues = table.map((a, i)=>{
    let row = []
    header.forEach((e)=>{row.push(a[e])});
return row;
});

Теперь у вас есть header и tableValues

header это array, а tableValues это Array of Array