0

So I'm working on a project where I need to build a bar chart from a dataset fetched from a json resource. json format is at the following link: https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json

I saved the array into the variable named ‘dataset’. When trying to use the dataset in a d3 query (just for testing it), it appears that the dataset array is empty, however, with console.log the array contents are successfully printed to the browser console. I could not figure the reason why this is happening. My code so far:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://d3js.org/d3.v6.js"></script>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300&display=swap" rel="stylesheet">
    <title>D3 Bar Chart</title>
</head>
<body>
    <div id="chart-container">
        <h1 id="title">United States GDP</h1>
    </div>
    <script>
        let dataset = [];
      

        fetch('https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json').then(
            response => response.json()).then(
            data => {
                for(let i = 0; i < data.data.length; i++) {
                    dataset.push(data.data[i]);
                }

            });

        d3.select('#chart-container').selectAll('p').data(dataset).enter().append('p').text((d) => d[1]);
        console.log(dataset);
        
    </script>
</body>
</html>

Console.log output:

console output

El_Gfm
  • 15
  • 1
  • 1
  • 6
  • In order to access dataset attributes like `data-number`, you must use `Element.dataset.number`. – quicVO Mar 16 '21 at 20:23
  • @quicVO I saw some examples based on bidimensional array datasets, so my intention here was to convert dataset to a simple bidimensional array and access it with indexes, like a normal array... I don't know if that's ever possible here – El_Gfm Mar 16 '21 at 20:33
  • Oh, you need to put this into an async function instead of using `.then`. I see. – quicVO Mar 16 '21 at 20:38
  • Does this answer your question? [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) – Robin Mackenzie Mar 16 '21 at 21:52
  • @RobinMackenzie not really, because even after putting code into an async function d3 query still does nothing. But I don't think the problem is in d3, because when I do console.log(dataset[0][1]) (for example) I get the following error - "Uncaught TypeError: Cannot read property '1' of undefined". However, if I do console.log(dataset) it prints the whole array. So basically I can't access the dataset array by indexes, for some reason – El_Gfm Mar 16 '21 at 22:06

1 Answers1

0

Make the script element into a module to make it asynchonous:

<script type='module'>
    let dataset = [];
    let response = await fetch('https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json');
    let responseJSON = await response.json();
    for (let i = 0; i < data.data.length; i++) {
        dataset.push(data.data[i]);
    }
    d3.select('#chart-container').selectAll('p').data(dataset).enter().append('p').text((d) => d[1]);
    console.log(dataset);
</script>
quicVO
  • 778
  • 4
  • 13
  • my editor says that "the 'await' operator can be used only in an 'async' function... so i placed it an an async function getData(), the console.log prints the dataset, but d3 query still does nothing.. – El_Gfm Mar 16 '21 at 20:50
  • Yes, ` – quicVO Mar 16 '21 at 20:52