在 json 数组中的每个 json 对象中添加另一个 json 对象

Question

嗨，我是 Highchart、javascript、jquery、html、json 数组、json 对象的新手，我正在尝试向 json 数组中的每个 json 对象添加另一个 json 对象，是否可以在 javascript 中使用 push 来做到这一点？任何人都可以指导我，我将非常感谢您

当前 jsonArray 里面有 json 对象

[{showInLegend: false, type: 'column',
    name: 'Test1',
    id: 'Test1',
    data: [10, 10]
},{showInLegend: false, type: 'column',
    name: 'Test2',
    id: 'Test2',
    data: [120, 120]
},{showInLegend: false, type: 'column',
    name: 'Test3',
    id: 'Test3',
    data: [320, 120]
}]

我想在 jsonarray 中的每个 json 对象中添加这个

tooltip: {
    pointFormatter: function () {
        return this.series.name + '<br/><span style="color:#273c75"><b> Amount : </b> </span>$' + this.y.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }
}

预期输出

[{showInLegend: false, type: 'column',
    name: 'Test1',
    id: 'Test1',
    data: [10, 10],tooltip: {
        pointFormatter: function () {
            return this.series.name + '<br/><span style="color:#273c75"><b> Amount : </b> </span>$' + this.y.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        }
    }
},{showInLegend: false, type: 'column',
    name: 'Test2',
    id: 'Test2',
    data: [120, 120],tooltip: {
        pointFormatter: function () {
            return this.series.name + '<br/><span style="color:#273c75"><b> Amount : </b> </span>$' + this.y.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        }
    }
},{showInLegend: false, type: 'column',
    name: 'Test3',
    id: 'Test3',
    data: [320, 120],tooltip: {
        pointFormatter: function () {
            return this.series.name + '<br/><span style="color:#273c75"><b> Amount : </b> </span>$' + this.y.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        }
    }
}]

Answer 1

好吧，假设您的对象数组称为array，您只需这样做：

var tooltip = {
   pointFormatter: function () {
       return this.series.name + '<br/><span style="color:#273c75"><b> Amount : </b> </span>$' + this.y.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
   }
}

array.forEach(function(item) {
    item.tooltip = tooltip;
});

这样，数组中的每个对象都会被修改。但是，请注意这一点，我不知道您如何使用pointFormatter 函数，但除非您使用apply 或call 调用它，否则其中的this 变量将是全局命名空间，而不是特定对象。

希望这会有所帮助。

Answer 2

如果是JSON，先做JSON.parse(data)，得到正常的js数组，然后 使用 javascript map 函数。示例代码

const exampleArray = JSON.parse(data);
const result = exampleArray.map(item => {
                 return {
                 ... item,
                 tooltip: {
                        pointFormatter: function () {
                            return this.series.name + '<br/><span style="color:#273c75"> 
                          <b> Amount : </b> </span>$' + 
                          this.y.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, 
                            ",");
                        }
                    }
};
})

Answer 3

这是一个适合你的工作 sn-p。

const initData = [{showInLegend: false, type: 'column',
    name: 'Test1',
    id: 'Test1',
    data: [10, 10]
},{showInLegend: false, type: 'column',
    name: 'Test2',
    id: 'Test2',
    data: [120, 120]
},{showInLegend: false, type: 'column',
    name: 'Test3',
    id: 'Test3',
    data: [320, 120]
}];

const pointerObj = function () {
        return this.series.name + '<br/><span style="color:#273c75"><b> Amount : </b> </span>$' + this.y.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
};


const newData = initData.map(data => {
  return { ...data, tooltip: {
    pointer: function () {
        return this.series.name + '<br/><span style="color:#273c75"><b> Amount : </b> </span>$' + this.y.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
  }}
});

console.log("New Data", newData);

Answer 4

您可以简单地遍历数组并为每个条目定义一个属性。在对象中不存在的属性上使用点运算符将创建一个。如果它存在，它将简单地覆盖它。

方法如下：

// 1. Define your list/array
var myList = [{showInLegend: false, type: 'column',
                name: 'Test1',
                id: 'Test1',
                data: [10, 10]
            },{showInLegend: false, type: 'column',
                name: 'Test2',
                id: 'Test2',
                data: [120, 120]
            },{showInLegend: false, type: 'column',
                name: 'Test3',
                id: 'Test3',
                data: [320, 120]
            }];
// 2. Traverse the list and define the value of the new property.
for (var i = 0; i < myList.length; i++) {

    myList[i].tooltip = function () {
                            console.log("insert my code here...");
                        }
}

// 3. Execute the function for the first list entry
this.myList[0].tooltip()

对于系列名称，我不确定该属性在哪里，但这可能是您正在寻找的东西：

// 1. Define your list/array
var myList = [{showInLegend: false, type: 'column',
                name: 'Test1',
                id: 'Test1',
                data: [10, 10]
            },{showInLegend: false, type: 'column',
                name: 'Test2',
                id: 'Test2',
                data: [120, 120]
            },{showInLegend: false, type: 'column',
                name: 'Test3',
                id: 'Test3',
                data: [320, 120]
            }];
// 2. Traverse the list and define the value of the new property.
for (var i = 0; i < myList.length; i++) {

    myList[i].tooltip = function () {
                                return this.name + '<br/><span style="color:#273c75"><b> Amount : </b> </span>$' + this.data[0].toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");}
}

// 3. Execute the function for the first list entry
this.myList[0].tooltip()

为什么我们不应该使用数组推送？

你必须定义你想要什么以及你真正想要做的是修改数组的现有条目而不是添加新条目。 Push 在数组末尾添加新元素/条目。所以，你真正想要做的是向条目/数组元素添加一个属性，而不是向列表添加一个新元素。