Bar chart I can not access nested arrays

JavaScript
1

hello campers ,I got an json from FCC api I mapped over it I converted it to object and I maped over the data existed inside of the object and I pushed it in an array ,
finally I got an array called dataset that is two dimensional array ,when I open it in the console I see what it has in inside but I canot access those values writing like :
dataset[0]
I don’t know why ??
please check out my code in code to get the picture of this .

2

The problem is that req.onload is an asynchronous function, so any code written after it will be executed before req.onload has completed. So, although req.responseText is not available initially, console.log(dataset) will update as req.responseText is received, but console.log(dataset[0]) will not (javascript behaviour). The solution is to wrap all references to req.responseText (including dataset) inside the req.onload function curly braces { }. Then you will be able to successfully access the dataset[0] value.

1 Like
3

I understand the concept but when I put the dataset inside the req,onload function ,you know dataset becomes a variable declared locally so I can not access from outside the req.onload function ,
I thoug if I put a counter and use if statment from outside I can solve it ,but it is the same thing ,I am still stuck can you give me more explanation please ,and thanks in advance .

1 Like
4

Just put everything inside the req.onload function. You can still declare dataset before it so it is available outside this function, but just remember its full contents won’t be available immediately as req.responseText is asynchronous (takes some time to complete):

var dataset = [];
req = new XMLHttpRequest();
req.open(
  "GET",
  "https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json",
  true
);
req.send();
req.onload = function() {
  json = JSON.parse(req.responseText);
  json.data.map(function(d) {
    dataset.push(d);
  });
  console.log(dataset)// look at the console I got this is a nested array
  console.log(dataset[0])// I don't know what I can not access any nested array inside of it 
  let w="900";
  let h="400";
  // let s write a scale 

  //const minX = d3.min(dataset, (d) => d[0]);
  /*
  let canvas=d3.select("svg")
             .attr("width",w)
             .attr("height",h)
  let group =canvas  
  */
}
1 Like
5

I think a lot but I don’t know what to do ,I used a callback function and also it dosen’t help I am really stuck on this ,I don’t know wthat are the references that I should put indise req.onload ,I am in the bar chart challenge right now and I don’t start it yet ,and this issue confused me ,
as I said to you the concept is understood but what is the appraoch ???
if there is no more hint ,please just give it to me direclty .

1 Like
6

I finally understand what you meant , I should put every reference inside the function onload wich means any thing related to the dataset variable array that I want to use it ,because ,before I thought that there is a way to just take out the dataset from the API and use it freely outside ,despite of the asynchronous behavior of javascript .