不直接展示此列，在操作列加一個(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è)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: