Question - How can mapp json data into objects? json can be found here

Details - I was able to connect to api and get the json data. Now i want to map 2 array data.hourly.time[] & data.hourly.temperature_2m[] into 1 DataTable? I need datatable inorder to display json data into google charts api Below is a example of datable format that I am trying to create using 2 arrays from json data

javascript code

  $.ajax({
        url: FullURL,
        dataType: "JSON",
        success: function (data) {
            
            alert(data.hourly.time[1]   "_"   data.hourly.temperature_2m[1]);
            
       // This ex below is from google api document. i want to conver json array into datatable 
            var data = new google.visualization.DataTable();
            data.addColumn('number', 'X');
            data.addColumn('number', 'Dogs');
            data.addRows([
                [0, 0], [1, 10], [2, 23], [3, 17], [4, 18], [5, 9],
                [6, 11], [7, 27], [8, 33], [9, 40], [10, 32], [11, 35],
                [12, 30], [13, 40], [14, 42], [15, 47], [16, 44], [17, 48],
                [18, 52], [19, 54], [20, 42], [21, 55], [22, 56], [23, 57],
                [24, 60], [25, 50], [26, 52], [27, 51], [28, 49], [29, 53]
            ]);

CodePudding user response：

You can convert the JSON data into a DataTable object by looping through the arrays and adding the appropriate data to the DataTable object. The code would look something like this:

var data = new google.visualization.DataTable();
data.addColumn('number', 'Time');
data.addColumn('number', 'Temperature');

for (i = 0; i < data.hourly.time.length; i  ) {
    data.addRow([data.hourly.time[i], data.hourly.temperature_2m[i]]);
}

CodePudding user response：

You can use the Array.prototype.forEach() method for this. Array.prototype.forEach() mdn.

The second argument of the callback is the current index of the element. And you can use this index for another array.

const data = new google.visualization.DataTable();
data.addColumn('number', 'Time');
data.addColumn('number', 'Temperature');
const temperatureArray = data.hourly.temperature_2m;
data.hourly.time.forEach((currentTime, index)=>{
  data.addRow([currentTime, temperatureArray[index]])
});

CodePudding user response：

Here is how you can convert the JSON input into a grid (array of arrays) using a array .map(), for use in a datatable with data.addRows(grid). The JSON input is reduced to 10 items for this demo:

const input = { "latitude": 42.635273, "longitude": -73.72632, "generationtime_ms": 7.2220563888549805, "utc_offset_seconds": -18000, "timezone": "America/New_York", "timezone_abbreviation": "EST", "elevation": 35.0, "current_weather": { "temperature": -0.1, "windspeed": 3.2, "winddirection": 304.0, "weathercode": 3, "time": "2023-01-21T18:00" }, "hourly_units": { "time": "iso8601", "temperature_2m": "°C" }, "hourly": { "time": ["2023-01-14T00:00", "2023-01-14T01:00", "2023-01-14T02:00", "2023-01-14T03:00", "2023-01-14T04:00", "2023-01-14T05:00", "2023-01-14T06:00", "2023-01-14T07:00", "2023-01-14T08:00", "2023-01-14T09:00"], "temperature_2m": [-0.5, -0.8, -1.2, -1.6, -1.7, -1.6, -1.6, -1.7, -2.1, -2.2] } };

let grid = input.hourly.time.map((val, idx) => [val, input.hourly.temperature_2m[idx]]);
console.log('grid:', grid);
// data.addRows(grid);

Output:

grid: [
  [ "2023-01-14T00:00", -0.5 ],
  [ "2023-01-14T01:00", -0.8 ],
  [ "2023-01-14T02:00", -1.2 ],
  [ "2023-01-14T03:00", -1.6 ],
  [ "2023-01-14T04:00", -1.7 ],
  [ "2023-01-14T05:00", -1.6 ],
  [ "2023-01-14T06:00", -1.6 ],
  [ "2023-01-14T07:00", -1.7 ],
  [ "2023-01-14T08:00", -2.1 ],
  [ "2023-01-14T09:00", -2.2 ]
]

It might take some time to get used to functional programming, in this example using .map() instead of a for loop, but functional programming makes code more efficient and readable.

References:

• .map(): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map
• Functional programming overview: https://www.freecodecamp.org/news/functional-programming-in-javascript/