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

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • ES6中新增的Object.assign()方法详解

    ES6中新增的Object.assign()方法详解

    Object.assign方法用于对象的合并,将源对象( source )的所有可枚举属性,复制到目标对象( target ),下面这篇文章主要给大家介绍了关于ES6中新增的Object.assign()方法的相关资料,需要的朋友可以参考下。
    2017-09-09
  • 深入了解JavaScript中递归的理解与实现

    深入了解JavaScript中递归的理解与实现

    本文将通过递归的经典案例:求斐波那契数来讲解递归,通过画递归树的方式来讲解其时间复杂度和空间复杂度以及递归的执行顺序,感兴趣的可以了解一下
    2022-06-06
  • JS.findElementById()使用介绍

    JS.findElementById()使用介绍

    JS.findElementById()想必大家并不陌生吧,下面有个不错的示例,感兴趣的朋友可以参考下
    2013-09-09
  • 微信小程序wxml列表渲染原理解析

    微信小程序wxml列表渲染原理解析

    这篇文章主要介绍了微信小程序wxml列表渲染原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-11-11
  • three.js实现圆柱体

    three.js实现圆柱体

    这篇文章主要为大家详细介绍了three.js实现圆柱体的相关代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • Three.js+React制作3D梦中海岛效果

    Three.js+React制作3D梦中海岛效果

    深居内陆的人们,大概每个人都有过大海之梦吧。本文使用React+Three.js技术栈,实现3D海洋和岛屿,感兴趣的小伙伴可以跟随小编一起学习一下
    2022-05-05
  • IE6-IE9不支持table.innerHTML的解决方法分享

    IE6-IE9不支持table.innerHTML的解决方法分享

    让ie6-ie9支持table.innerHTML,其实这里只是对table做了处理,对其他不支持的元素可以用类似的方案
    2012-09-09
  • javaScript实现一个队列的方法

    javaScript实现一个队列的方法

    这篇文章主要介绍了javaScript实现一个队列的方法,文中讲解非常细致,代码帮助大家更好的理解和学习,感兴趣的朋友可以了解下
    2020-07-07
  • 解析瀑布流布局:JS+绝对定位的实现

    解析瀑布流布局:JS+绝对定位的实现

    本篇文章是对瀑布流局部的实现进行了详细的分析介绍。需要的朋友参考下
    2013-05-05
  • 微信网页授权并获取用户信息的方法

    微信网页授权并获取用户信息的方法

    这篇文章主要介绍了微信网页授权并获取用户信息的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07

最新评论