首頁(yè) 猿問(wèn) 將鍵、值 JSON 數(shù)組轉(zhuǎn)換為表格...

將鍵、值 JSON 數(shù)組轉(zhuǎn)換為表格 JSON 格式

JavaScript

富國(guó)滬深 2023-09-28 16:20:36

我有以下圖表的 JSON 數(shù)據(jù)var chartJson = [ { header : '2016', values : [1, 5, 9] }, { header : '2017', values : [2, 4, 8] }, { header : '2018', values : [3, 1, 5] }];并需要將其轉(zhuǎn)換為這種格式以提供我的 HTML 表var tableJson = [ { 2016 : 1, 2017 : 2, 2018 : 3 }, { 2016 : 5, 2017 : 4, 2018 : 1 }, { 2016 : 9, 2017 : 8, 2018 : 5 }];任何將其轉(zhuǎn)換為這種格式的快速幫助將不勝感激。我嘗試使用這段代碼，但不知何故缺少邏輯。let table = []; for(var row of chartJson ){ for(var value of row.values) { table.push( { column : row.header, value : value }); } }

查看完整描述

3 回答

狐的傳說(shuō)

TA貢獻(xiàn)1804條經(jīng)驗(yàn) 獲得超3個(gè)贊

var chartJson = [{

header: '2016',

values: [1, 5, 9]

},

{

header: '2017',

values: [2, 4, 8]

},

{

header: '2018',

values: [3, 1, 5]

}

];

let table = [];

chartJson.forEach((row, index) => {

row.values.forEach((val, j) => {

table[j] = { ...table[j],

[row.header]: val

}

});

console.log(table)

反對(duì) 回復(fù) 2023-09-28

汪汪一只貓

TA貢獻(xiàn)1898條經(jīng)驗(yàn) 獲得超8個(gè)贊

迭代每個(gè)chartJson' 元素及其值（通過(guò)內(nèi)部循環(huán)）直到values'length 并從中創(chuàng)建一個(gè)對(duì)象。
最后，將該對(duì)象推入table數(shù)組中。

就是這樣。

看看下面的片段：

var chartJson = [

{

header: '2016',

values: [1, 5, 9]

},

{

header: '2017',

values: [2, 4, 8]

},

{

header: '2018',

values: [3, 1, 5]

}

];

let table = [];

let len_of_chartJson = chartJson.length, len_of_values = chartJson[0].values.length;

for (var i = 0; i < len_of_chartJson; i++) {

let obj = {};

for (var j = 0; j < len_of_values; j++) {

obj[chartJson[j].header] = chartJson[j].values[i];

}

table.push(obj);

}

console.log(table);

反對(duì) 回復(fù) 2023-09-28

Qyouu

TA貢獻(xiàn)1786條經(jīng)驗(yàn) 獲得超11個(gè)贊

let table = chartJson.reduce((tbl, rec) => {

? ? ? ? ? rec.values.forEach((num, index) => {

? ? ? ? ? ? ? ? ? if(!tbl[index]){

? ? ? ? ? ? ? ? ? ? ? ? ? tbl[index] = {}

? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? tbl[index][rec.header] = num

? ? ? ? ? })

? ? ? ? ? return tbl

? ? ? ? ? }, [])

數(shù)組reduce函數(shù)用于循環(huán)遍歷每個(gè)對(duì)象，比每個(gè)對(duì)象循環(huán)遍歷每個(gè)值，檢查表中是否存在索引，如果不存在，則在當(dāng)前索引處創(chuàng)建一個(gè)空對(duì)象。最后它在當(dāng)前索引對(duì)象中創(chuàng)建一個(gè)鍵值。

反對(duì) 回復(fù) 2023-09-28