使用json對(duì)象轉(zhuǎn)化為key,value的對(duì)象數(shù)組

更新時(shí)間：2022年06月17日 11:14:38 作者：阿仁_清風(fēng)徐來

這篇文章主要介紹了使用json對(duì)象轉(zhuǎn)化為key，value的對(duì)象數(shù)組方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

json對(duì)象轉(zhuǎn)為key,value對(duì)象數(shù)組

問題引出

在某個(gè)從后端獲取的表格數(shù)據(jù)中，有一列是對(duì)象格式，不能用于直接展示。

解決方式

不直接展示此列，在操作列加一個(gè)按鈕，點(diǎn)擊之后彈窗展示那一列的數(shù)據(jù)，形式為key和value的兩列表格，key為該對(duì)象的各個(gè)字段名，value為字段值。這就需要將對(duì)象轉(zhuǎn)化為key和value形式的對(duì)象數(shù)組。

代碼

const metaData = {"api-type": "apiparser", "management.port": "8101"}
Object.entries(metaData).map(([key, value]) => ({
	key, value
}))

效果

key，value的對(duì)象數(shù)組轉(zhuǎn)化為json對(duì)象

arr.reduce((acc, curr) => {
  acc[curr.key] = curr.value
  return acc
}, {})

函數(shù)式

/**
 * 傳入對(duì)象得到 key、value 形式的對(duì)象數(shù)組
 * key、value可以自定義
 * @param {Object} MAP 要處理的對(duì)象
 * @param {String} key 對(duì)象的key
 * @param {String} value 對(duì)象的value
 * @returns 數(shù)組
 */
export function mapToJson(MAP, key, value) {
  return Object.keys(MAP).map(item => ({
    [key]: item,
    [value]: MAP[item],
  }))
}

數(shù)組轉(zhuǎn)換成json key-value形式

eg1（數(shù)組中包含的是數(shù)組）

var jsonData = {};
var arr = [[1, 'boy', 'dabing'], [2, 'girl', 'dabing']];
for (var i = 0; i < arr.length; i++) {
? ? var key = arr[i][1];
? ? var value = arr[i][2];
? ??
? ? jsonData[key] = value;
}
console.log(jsonData['boy'])// 'dabing'

eg2（數(shù)組中包含的是對(duì)象）

var jsonData = {};
var arr = [ { id: 3, name: 'MAN_MIDDLESCHOOL_STUDENT', value: 'predefine' },?
? ? ? ? ? ? { id: 4, name: 'FEMALE_MIDDLESCHOOL_STUDENT', value: 'predefine' }];
for (var i = 0; i < arr.length; i++) {
? ? var key = arr[i].name;
? ? var value = arr[i].value;
? ? jsonData[key] = value;
}
console.log(jsonData);//{ MAN_MIDDLESCHOOL_STUDENT: 'predefine', FEMALE_MIDDLESCHOOL_STUDENT: 'predefine' }

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: