How do i use the json data fetched by fetch()

Question

I used the following code to fetch JSON data which was a success. I initialized a global array and stored one unit of that data in an array. Now somewhere in my code, there is an array nested inside an object how do I pass this array there?

var myRequest = new Request("https://script.googleusercontent.com/macros/echo?user_content_key=KW75vuIX25SoStm_K2HLVQNBRF2fx_5URDdL-vYJfUSTBaOAlMkJeWc25wjo5zdMLaznziyuqNd4B5kNs8k3tH0OxgnfssPwm5_BxDlH2jW0nuo2oDemN9CCS2h10ox_1xSncGQajx_ryfhECjZEnIFtsXaNuh0rFflir-T-GWuA8AvQ2kUI-jEwpZssg8RaEHh5W9MAfgDGMRkNsN06wEWY2nZ7HPw5&lib=M_p61mp1Qy6uGkXTBzlj4kloBXIZCdEN3")

fetch(myRequest)
.then(function(res){
    return res.json();
})
.then(function(data){

    for(var i=0;i<400;i++)
    {
        arr[i]=data.user[i].battingScore;

    }
    return arr;
});

This is where I want to use the arr:

 document.addEventListener('DOMContentLoaded', function () {
document.addEventListener('DOMContentLoaded', function () {
    var myChart3 = Highcharts.chart('c', {

    title: {
        text: 'Logarithmic axis demo'
    },

    xAxis: {
        tickInterval: 1,
        type: 'logarithmic'
    },

    yAxis: {
        type: 'logarithmic',
        minorTickInterval: 0.1
    },

    tooltip: {
        headerFormat: '<b>{series.name}</b><br />',
        pointFormat: 'x = {point.x}, y = {point.y}'
    },

    series: [{
        data:[],                               //here
        pointStart: 1
    }]
});
});
});

Note: Here, series is an array of objects but is an attribute of hello object. I want the values of arr inside data which is an array. How to do that?

`series`, as you've noted, is an *array*. You'll have to specify *which* child of `series` you're trying to update. For example, to set the *first*, it would be `hello.series[0].data = arr`. That said, I can't help but feel this may be moving towards ["How do I return the response from an asynchronous call?"](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call). — Tyler Roper, Nov 04 '19 at 21:07
In regards to *"This is where I want to use the arr"*: If you mean you want to access the value of `arr` when declaring that object (outside of the `.then( ... )`), then in that case we're not *"trending towards"* ["How do I return the response from an asynchronous call?"](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) as I said above. We're already there! :) — Tyler Roper, Nov 04 '19 at 21:10
@TylerRoper where do I use hello.series[0].data = arr? Above where im fetching the data from JSON? — Harshal Sharma, Nov 04 '19 at 21:15
It depends on what you're trying to do with `hello`. But if you're depending on the result of the `fetch`, then you'll have to define and use `hello` within the `.then()`, where you have `return arr`. — Tyler Roper, Nov 04 '19 at 21:16
@TylerRoper I'm using highcharts and in the data part there I want the array I fetched from my JSON. — Harshal Sharma, Nov 04 '19 at 21:19

score 0 · Answer 1 · answered Nov 05 '19 at 05:27

If you want to gather the data before rendering the chart, you could do this.

fetch(myRequest)
    .then(function(res){
        return res.json();
    })
    .then(function(data){
        for(var i=0;i<400;i++){
            arr[i]=data.user[i].battingScore;
        }
        return arr;
    })
    .then(function(scores){
        document.addEventListener('DOMContentLoaded', function () {
            var myChart3 = Highcharts.chart('c', {
                 . . .
                series: [{
                    data:scores,
                    pointStart: 1
                }]
            });
        });
    });
});

Otherwise, you can define your myChart3 as a global variable and change "var myChart3=" to just "myChart3=" in your event listener. Then, you can populate the data into the existing chart using series.addPoint like this:

var myChart3;

document.addEventListener('DOMContentLoaded', function () {
    myChart3 = Highcharts.chart('c', {
     . . .
    });
});

fetch(myRequest)
    .then(function(res){
        return res.json();
    })
    .then(function(data){
        for(var i=0;i<400;i++){
            myChart3.series[0].addPoint(data.user[i].battingScore, false);
        }
        myChart3.redraw();
    },
    cache: false
});

How do i use the json data fetched by fetch()

1 Answers1