在chartjs栏中合并具有不同键的两个对象

Question

我有两个jsons：

first: {
"a": 1,
"b": 9,
"c": 12,
"d": 5
}  

和

second: {
"a": 7,
"e": 8,
"b": 11,
"f": 7
}  

我想创建包含json（带有两个数据集）的chartjs栏。标签应该是'a'，'b'，'c'，'d'，'e'，'f'和“first”数据集的数据将是：1,9,12,5,0,0。 “第二”数据集的数据将是：7,11,0,0,8,7。

我的代码现在：

var barChartData = {
    labels: Object.keys(first),
    datasets:[
        {
            label:'first',
            data: Object.values(first)
        },
        {
        label: 'second',
        data: Object.values(second)
        }]
};

window.myBar = new Chart(document.getElementById("barChart").getContext("2d"),
{
    type:'bar',
    data: barChartData
});

问题是我希望标签来自“第一”和“第二”jsons的键，而不仅仅来自“第一”，而且值也适合于键。

有没有简单的方法来做到这一点？

Answer 1

看起来您希望两个对象具有相同的键，但在未定义键时值为零。有几种方法可以做到这一点。一个选项是创建两个对象的组合键列表，然后循环遍历它们，如果键不存在，则将对象的值设置为0：

let first = {"a": 1,"b": 9,"c": 12,"d": 5  }  
  
let second = {"a": 7,"e": 8,"b": 11,"f": 7} 

Object.keys(Object.assign({}, first, second))    // get combined keys
.forEach(k => {
  if (!first.hasOwnProperty(k))  first[k] = 0;   // set 0 if key is not in object 
  if (!second.hasOwnProperty(k)) second[k] = 0;
})
console.log(first, second)