React - 将对象转换为具有属性的对象数组

IT技术 javascript reactjs
2021-04-30 19:13:15

我有以下对象

"data":{  
         "name 1":"a",
          "name 2":"b",
          "name 3":"b",
        },

如何转换为同时保留名称和数据“a”、“b”的对象数组,以便我可以为每个传入名称和数据的组件映射和渲染?

4个回答

如果您使用减少功能,您可以执行以下操作来实现您的目标

Object.keys(data).reduce((array, key) => {
    return [...array, {key: data[key]}]
}, [])

Reduce 是一个很酷的函数,它迭代并将数据组合成一个项目(可以是 1 个对象、数组、整数等)。

Object.keys() 是一种从当前对象中获取每个键并能够迭代每个键的方法。

Tall Paul 提供的解决方案将完美运行,但您也可以使用Object.entries()它指出

Object.entries() 方法返回给定对象自己的可枚举属性 [key, value] 对的数组,其顺序与 for...in 循环提供的顺序相同(区别在于 for-in 循环枚举原型链中的属性也是如此)。

所以你可以尝试这样的事情

let result = Object.entries(data);
result.map((item, index)=>{
      console.log('key is:- ', item[0], ' and value is:- ', item[1]); 
});

您可以Object.keys使用map函数获取数组中对象中的所有键,并使用函数来获得所需的输出。

这将转换为同时保留name 和 data的对象数组

var data = {  
          "name 1":"a",
          "name 2":"b",
          "name 3":"b",
}
var res = Object.keys(data).map(function(name){
	var obj = {};
	obj[name] = data[name];
	return obj;
});

console.log(res);

你可以使用的 js 本地方法;

var data = {  
     "name 1":"a",
      "name 2":"b",
      "name 3":"b",
    };
    var newObj = [...Object.values(data), ...Object.keys(data)]
    console.log(newObj)