js将对象转为数组,key value对应

156 阅读1分钟
在项目开发中,后端返回的数据是对象,前端为了简单画出页面,使用v-for,这时候可以将对象转为数组,来方便使用v-for循环

数据格式如下:

 let obj = {
    radio: [],
    stem_radio: [],
    stem_multiple_choice: [
      {number: 7},
      {number: 10},
    ],
    checkbox: [],
    stem_checkbox: []
 };

思路:使用Object.entries()静态方法返回一个数组,包含给定对象自有的可枚举字符串键属性的键 值对。再使用map方法将键名和键值对应返回新的数组

function toArr(obj) {
    let array = Object.entries(obj).map(([key, value]) => ({ key: key, value: value }));
    console.log(array);
}

成功转换后数据格式如下: image.png

这下在使用v-for循环出来就可以了

还有一个问题就是需要根据key展示对应中文名称,数据少的话模板使用三元表达式就能解决,考虑到数据多的话可以写个方法:将key值传进来即可

// 格式化题型名称
formatTopicName(item) {
  const topicNames = {
      "radio": '单选题',
      "stem_radio": '共用题干单选题',
      "stem_multiple_choice": '案例分析题',
      "checkbox": '多选题',
      "stem_checkbox": '共用选项单选题',
   };
   return topicNames[item];
 },