How to modify values in a JSON array using JavaScript

Question

How to modify values in a JSON array using JavaScript

Currently, I am facing an issue with displaying dates properly on the x-axis of a graph created using Highcharts. To solve this problem, I need to parse the dates from the JSON response. Despite my attempts to manipulate the JSON date, I have not been able to achieve the desired outcome.

This is the current JSON response

"linechart":[{
                "name":"Average Conversation Length (In minutes)",
                "data":[["2020,02,12",12],["2020,02,13",13]]
            },{
                 "name":"Average Number of Conversations",
                 "data":[["2020,02,12",10],["2020,02,13",21]]
            }]

The expected output should be as follows:

linechart: [{name: "Average Conversation Length (In minutes)",
            data: [[Date.UTC(2020, 02, 12), 12],[Date.UTC(2020, 02, 13), 13]]},
            {name: "Average Number of Conversations",
            data: [[Date.UTC(2020, 02, 12), 10],[Date.UTC(2020, 02, 13), 21]]}],

Here is what I have tried so far:

    var arr1 = [];
var data = chartdata.linechart
for (var i = 0; i < data.length; i++){
    var obj = data[i];
    for (var key in obj){
      var value = obj[key];
      for (var value2 in value){
        var values = value[value2];
        arr1.push(Date.parse(values));
      }
    }
  }

javascript json highcharts

Answer 1

Answer №1

let visualData = chartdata.linechart;
for (let index = 0; index < visualData.length; index++) {
  let object = visualData[index];
  object.data.forEach(item => {
    item[0] = Date.parse(item[0]);
  });
}

console.log(visualData);

Answer 2

let visualData = chartdata.linechart;
for (let index = 0; index < visualData.length; index++) {
  let object = visualData[index];
  object.data.forEach(item => {
    item[0] = Date.parse(item[0]);
  });
}

console.log(visualData);

Answer 3

Answer №2

If you want to transform the elements, you can use the map method:

let barchart = [
  {
    "name":"Total Sales",
    "data":[["2021,01,25",5000],["2021,01,26",8000]]
},{
    "name":"Number of Orders",
    "data":[["2021,01,25",50],["2021,01,26",80]]
}]

const transformedData = barchart.map(item => {
    return {name: item.name, data: item.data.map( ([date, value]) => {
        return [new Date(date), value]
    })}
})

console.log(transformedData)

Answer 4

If you want to transform the elements, you can use the map method:

let barchart = [
  {
    "name":"Total Sales",
    "data":[["2021,01,25",5000],["2021,01,26",8000]]
},{
    "name":"Number of Orders",
    "data":[["2021,01,25",50],["2021,01,26",80]]
}]

const transformedData = barchart.map(item => {
    return {name: item.name, data: item.data.map( ([date, value]) => {
        return [new Date(date), value]
    })}
})

console.log(transformedData)

Answer 5

Answer №3

If you want to explore another method, consider the following:

const dataSet = [{
  "name": "Average Conversation Duration (In minutes)",
  "data": [
    ["2020,02,12", 12],
    ["2020,02,13", 13]
  ]
}, {
  "name": "Average Number of Interactions",
  "data": [
    ["2020,02,12", 10],
    ["2020,02,13", 21]
  ]
}];

dataSet.forEach(item => {
    item.data.forEach(data => {
        let date = data[0].split(',');
        
        data[0] = Date.UTC(date[0], date[1], date[2])
    })
})

https://jsfiddle.net/BlackLabel/ucx6ojL2/

Answer 6

If you want to explore another method, consider the following:

const dataSet = [{
  "name": "Average Conversation Duration (In minutes)",
  "data": [
    ["2020,02,12", 12],
    ["2020,02,13", 13]
  ]
}, {
  "name": "Average Number of Interactions",
  "data": [
    ["2020,02,12", 10],
    ["2020,02,13", 21]
  ]
}];

dataSet.forEach(item => {
    item.data.forEach(data => {
        let date = data[0].split(',');
        
        data[0] = Date.UTC(date[0], date[1], date[2])
    })
})

https://jsfiddle.net/BlackLabel/ucx6ojL2/

How to modify values in a JSON array using JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

"Create a dynamic entrance and exit effect with Tailwind CSS sliding in and out from

Displaying a PHP variable on the console through the power of jQuery and AJAX

What is the best way to access a promise's value in global scope within a reactjs application?

Attach a click event listener to content loaded through AJAX using only JavaScript, without relying on jQuery

Unending cycle occurs when utilizing a computed property alongside Vue Chart js

The administrator user assigns a user value in the authentication context, but that value remains hidden from the component where it was originally set

Having trouble displaying specific images on React Native, how can I resolve this issue?

Transforming data from a singular object into an array containing multiple objects with key-value pairs

Creating a personalized aggregation function in a MySQL query

"Revamp your site with Vue and API for dynamic background

Utilize jQuery to swiftly align elements within a designated container

creating sleek animations with Pixi.js for circular shapes

appearing like a straightforward process of creating strings in JavaScript

Tally the quantity of data points within jQuery Datatables

Should I implement this practice when developing an AJAX website? Is it recommended to enable PHP code within .html files, or should I switch to using .php files instead?

When a HTML table is generated from imported XML, DataTables will be applied

What led the Typescript Team to decide against making === the default option?

Initiate an AJAX request within an existing AJAX request

Guide on determining if the value in a JSON object is a string or an array in Node.js

Display all items with pagination in a Material UI Table using React