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

您也可以使用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 2

受@Akrion解决方案的启发，这是修改后的版本。

冗长的解决方案，但这在以下情况下将对您有帮助：

您的JSON数据中有不同的键
对象中的键顺序不同
要设置默认值，以防数据不可用

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链接：https://stackblitz.com/edit/js-zyh1ps

Answer 3

首先获取表的标题：

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

Answer 4

由于要按特定顺序排列某些列，因此应定义一个键数组，并使用_.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>

以及terser 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>

将对象数组转换为表格格式的数据

4 个答案: