使用json對象轉化為key,value的對象數組

Posted on by

json對象轉為key,value對象數組

問題引出

在某個從後端獲取的表格數據中，有一列是對象格式，不能用於直接展示。

解決方式

不直接展示此列，在操作列加一個按鈕，點擊之後彈窗展示那一列的數據，形式為key和value的兩列表格，key為該對象的各個字段名，value為字段值。這就需要將對象轉化為key和value形式的對象數組。

代碼

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

效果

key，value的對象數組轉化為json對象

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

函數式

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

數組轉換成json key-value形式

eg1（數組中包含的是數組）

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（數組中包含的是對象）

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' }

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：