Добавьте еще один json объект в каждый json объект внутри json массива

Question

Привет, я новичок в Highchart, javascript, jquery, html, json массив, json объект Я пытаюсь добавить еще один json объект к каждому json объекту внутри json массив, возможно ли это сделать в javascript используя pu sh? Кто-нибудь может направить меня, я буду очень признателен, спасибо

Текущий 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]
}]

Я хочу добавить это в каждый json объект внутри jsonarray

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

Вот рабочий фрагмент для вас.

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 2

Итак, если ваш массив объектов называется 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 внутри нее будет псевдонимом глобальное пространство имен, а не конкретный c объект.

Надеюсь, это поможет.

Answer 3

Вы можете просто просмотреть массив и определить свойство для каждой записи. Использование оператора точки на несуществующем свойстве объекта создаст его. Если он существует, он просто переопределит его.

Вот как:

// 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()

Почему бы нам не использовать массив pu sh?

Вы должны определить, что вы хотите и что вы на самом деле хотите do изменить существующие записи массива и не добавлять новые записи. Pu sh добавляет новые элементы / записи в конец массива. Итак, что вы на самом деле хотите сделать, это добавить свойство к элементам entry / array вместо добавления нового элемента в список.

Answer 4

Если это 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, 
                            ",");
                        }
                    }
};
})