使用json對象轉化為key,value的對象數組
更新時間:2022年06月17日 11:14:38 作者:阿仁_清風徐來
這篇文章主要介紹了使用json對象轉化為key,value的對象數組方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
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' }以上為個人經驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
JavaScript實現離開頁面前提示功能【附jQuery實現方法】
這篇文章主要介紹了JavaScript實現離開頁面前提示功能,結合具體實例形式分析了javascript實現針對關閉頁面的事件響應原理與操作技巧,并附帶jQuery的相應實現方法,需要的朋友可以參考下2017-09-09
JS 截取字符串substr 和 substring方法的區(qū)別
JS 截取字符串substr 和 substring方法的區(qū)別,需要的朋友可以參考下,根據需要自行選擇。2009-10-10
如何使用webpack5+TypeScript+npm發(fā)布組件庫
這篇文章主要介紹了如何使用webpack5+TypeScript+npm發(fā)布組件庫,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-04-04
僅IE9/10同時支持script元素的onload和onreadystatechange事件分析
測試結果可以看出,IE9后已經開始支持script的onload事件了。一直以來我們判斷js文件是否已經加載完成就是用以上的兩個事件。2011-04-04

