使用json對象轉(zhuǎn)化為key,value的對象數(shù)組
更新時(shí)間：2022年06月17日 11:14:38 作者：阿仁_清風(fēng)徐來
這篇文章主要介紹了使用json對象轉(zhuǎn)化為key，value的對象數(shù)組方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
json對象轉(zhuǎn)為key,value對象數(shù)組
問題引出
在某個(gè)從后端獲取的表格數(shù)據(jù)中，有一列是對象格式，不能用于直接展示。
解決方式
不直接展示此列，在操作列加一個(gè)按鈕，點(diǎn)擊之后彈窗展示那一列的數(shù)據(jù)，形式為key和value的兩列表格，key為該對象的各個(gè)字段名，value為字段值。這就需要將對象轉(zhuǎn)化為key和value形式的對象數(shù)組。
代碼
const metaData = {"api-type": "apiparser", "management.port": "8101"}
Object.entries(metaData).map(([key, value]) => ({
key, value
}))
效果
key，value的對象數(shù)組轉(zhuǎn)化為json對象
arr.reduce((acc, curr) => {
acc[curr.key] = curr.value
return acc
}, {})函數(shù)式
/**
* 傳入對象得到 key、value 形式的對象數(shù)組
* key、value可以自定義
* @param {Object} MAP 要處理的對象
* @param {String} key 對象的key
* @param {String} value 對象的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ù)組中包含的是對象）
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è)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Object.assign方法用于對象的合并，將源對象（ source ）的所有可枚舉屬性，復(fù)制到目標(biāo)對象（ target ），下面這篇文章主要給大家介紹了關(guān)于ES6中新增的Object.assign()方法的相關(guān)資料，需要的朋友可以參考下。2017-09-09
深入了解JavaScript中遞歸的理解與實(shí)現(xiàn)
本文將通過遞歸的經(jīng)典案例：求斐波那契數(shù)來講解遞歸，通過畫遞歸樹的方式來講解其時(shí)間復(fù)雜度和空間復(fù)雜度以及遞歸的執(zhí)行順序，感興趣的可以了解一下2022-06-06
JS.findElementById()想必大家并不陌生吧，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下2013-09-09
這篇文章主要介紹了微信小程序wxml列表渲染原理解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11
這篇文章主要為大家詳細(xì)介紹了three.js實(shí)現(xiàn)圓柱體的相關(guān)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
深居內(nèi)陸的人們，大概每個(gè)人都有過大海之夢吧。本文使用React+Three.js技術(shù)棧，實(shí)現(xiàn)3D海洋和島嶼，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2022-05-05
IE6-IE9不支持table.innerHTML的解決方法分享
讓ie6-ie9支持table.innerHTML，其實(shí)這里只是對table做了處理，對其他不支持的元素可以用類似的方案2012-09-09
javaScript實(shí)現(xiàn)一個(gè)隊(duì)列的方法
這篇文章主要介紹了javaScript實(shí)現(xiàn)一個(gè)隊(duì)列的方法，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
本篇文章是對瀑布流局部的實(shí)現(xiàn)進(jìn)行了詳細(xì)的分析介紹。需要的朋友參考下2013-05-05
這篇文章主要介紹了微信網(wǎng)頁授權(quán)并獲取用戶信息的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07