Having problem Working with Dynamic Data in D3

JavaScript
1

What is wrong with my code? I think its producing the desired output. Also I’m not getting how the “selection.text” to be used?

Your code so far


<body>
  <script>
    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
    
    d3.select("body").selectAll("h2")
      .data(dataset)
      .enter()
      .append("h2");
      // Add your code below this line
      
        for (var d=0;d<dataset.length;d++){
          d3.select("body").append("h2")
          .text(dataset[d]+" USD").enter();
        } 
      
      // Add your code above this line
  </script>
</body>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/data-visualization/data-visualization-with-d3/work-with-dynamic-data-in-d3

2

You won’t need the for loop. The code will iterate for each item in the dataset.

3

Hello Vinay,

If you check the challenge code, it seems it adds empty H2 tags with following code

Then you add another set of H2 tags. The issue comes here when test expected the first H2 comes with 12 USD but it’s empty.

You either select the existing H2 tag added and change their value, or go for a small hacky way and comment out the code test provides. It passes.

4

Thanks, making sense now!