how to map json data into object

Question

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]
            ]);

Answer 1

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]])
});

Answer 2

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/