JSON数据格式通过动态键，值

Question

我有一个JSON响应数据。我想将其显示为表格格式，但无法正确显示。请纠正我做错的地方。

响应数据

const response = [
{
"key": "Name",
"data": [ "Tom", "Mark", "Jack" ]
},
{
"key": "OfcLocation",
"data": [ "USA", "Spain",  "Japan" ]
},
{
"key": "IPAddress",
"data": [  "XX.XXX.X.XX", "XX.XXX.X.XX", "XX.XXX.X.XX" ]
},
{
"key": "Port",
"data": [  "4300", "4080", "9200" ]
},
{
"key": "Role",
"data": [ "Admin",  "Limited",  "Admin" ]
}
];

所需输出格式

[
{ "Name": "Tom",  "OfcLocation": "USA",  "IPAddress": "XX.XXX.X.XX", "Port": "4300", "Role": "Admin" },
{ "Name": "Mark", "OfcLocation": "Spain", "IPAddress": "XX.XXX.X.XX", "Port": "4080", "Role": "Limited" },
{ "Name": "Jack", "OfcLocation": "Japan", "IPAddress": "XX.XXX.X.XX", "Port": "9200", "Role": "Admin" }
]

代码

let formatedData = [];
let rowArr = {};
for( let i=0; i< response.length; i++) {
for( let j=0;j< response[i].data.length; j++) {
rowArr[response[i].key] = response[i].data[j];
}
formatedData.push(rowArr);
}

Answer 1

您可以使用Array.reduce函数获得所需的结果。

const response = [
{
"key": "Name",
"data": [ "Tom", "Mark", "Jack" ]
},
{
"key": "OfcLocation",
"data": [ "USA", "Spain",  "Japan" ]
},
{
"key": "IPAddress",
"data": [  "XX.XXX.X.XX", "XX.XXX.X.XX", "XX.XXX.X.XX" ]
},
{
"key": "Port",
"data": [  "4300", "4080", "9200" ]
},
{
"key": "Role",
"data": [ "Admin",  "Limited",  "Admin" ]
}
];
const result = response.reduce((acc, cur) => {
cur.data.forEach((item, index) => {
if (acc.length <= index) {
acc.push({
[cur.key]: item
});
} else {
acc[index][cur.key] = item;
}
});
return acc;
}, []);
console.log(result);

Answer 2

您需要切换内外循环，并将let rowArr = {};放入外循环中

let formatedData = [];
let rowArr = {};
for (let j = 0; j < response[0].data.length; j++) {
let rowArr = {};
for (let i = 0; i < response.length; i++) {
rowArr[response[i].key] = response[i].data[j];
}
formatedData.push(rowArr);
}

Answer 3

制作一个空对象数组，并将数据放入其中。。。

let sortedArray = [];
for(let i=0 ; i< response[0].data.length ; i++){
sortedArray.push(new Object);
}

function sort() {
response.forEach((el) => {
el.data.forEach((elem, i) => {
sortedArray[i][el.key] = elem;
});
});
}
sort();
console.log(sortedArray);