Question

我正在尝试配置我的API以使其适合Chart.js

我的API包含

{
    "Food": 900,
    "Shopping": 0,
    "Travel": 600,
    "Health": 0
}

应该像

[
    {
      data:900,
      label: 'Food'
    },

    {
      data: 0,
      label: 'Shopping'
    },

    {
      data: 600,
      label: 'Travel'
    },
    {
      data: 0,
      label: 'Health'
    }
];

Answer 1

当然，只需遍历每个道具的Object.entries和push并标记为数组：

const data = { "Food": 900, "Shopping": 0, "Travel": 600, "Health": 0 };
let result = [];
Object.entries(data).forEach(prop => result.push({
  "data": prop[1],
  "label": prop[0]
}));

console.log(result);

Answer 2

使用Object.Keys(yourObjectHere)获取一组对象键然后，您可以遍历此数组并使用键来访问为对象中每个键存储的值。在同一迭代中，您可以添加到新对象。例如：

var keys = Object.Keys(yourObjectHere)
for(var i = 0; i < keys.length; i++){
    var value = yourObjectHere[keys[i]];
    //add value and keys[i] to your new object
}

Answer 3

我认为这会有所帮助

let origin = { "Food": 900, "Shopping": 0, "Travel": 600, "Health": 0 };

let newObject = Object.entries(origin).reduce((obj, item) => {
  obj.push({
    "label": item[0],
    "data": item[1]
  });
 return obj;
}, [])

console.log(newObject)

您可以观看此video，以更好地了解reduce的工作原理。祝你好运！

Answer 4

也可以使用Object.keys来完成。这是一个例子

您可以在此处查看Object.Keys文档 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

var data = { "Food": 900, "Shopping": 0, "Travel": 600, "Health": 0 };
let result = [];
Object.keys(data).forEach(prop => 
result.push({
data: data[prop],
label: prop
}));

console.log(result);

从另一个JSON对象开始创建JSON对象

4 个答案: