Trouble accessing API data for D3 Project

JavaScript
1

I’m having trouble actually accessing the data from the API. I am comfortable doing so in React, but in vanilla JS I am not sure how to store the data so i can use it in the rest of my script. I can only log the actual data from inside the fetch call or getData function, other than that I am only returning the promise. I am working on a D3 project

       const url =
        "https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json";
      const fetchData = fetch(url)
        .then((res) => res.json())
        .then((data) => {
          return data.data
        });
      const getData = async () => {
        const gdpData = await fetchData;
        const json = await JSON.stringify(gdpData);
        //  console.log(gdpData);
        return gdpData;
       
      }
    
      getData();
          console.log(getData())


      const WIDTH = 500;
      const HEIGHT = 100;

      const svg = d3
        .select("body")
        .append("svg")
        .attr("width", WIDTH)
        .attr("height", HEIGHT);

      svg
        .selectAll("rect")
        .data(gdpData)
        .enter()
        .append("rect")
        .attr("x", (d, i) => {
          return i * 30;
        })
        .attr("y", (d, i) => {
          return HEIGHT - d[1] * 3;
        })
        .attr("width", 25)
        .attr("height", (d) => d[1] * 3)
        .attr('fill', 'pink')
2

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.