Data viz projects

JavaScript
1

Hi - I am using Atom to build my first data viz project. (Will move it over to codepen before submitting).

I am trying to get to the point where I am console.logging the exact data that I want (so I know that I am accessing it appropriately) before I then go about building the HTML + SVG around that data.

I think I am getting lost in the [array[array: {obj...} ]] weeds, so to speak.

What I want right now is to get the “year” value from the returned JSON data:

[
  {"page":1,"pages":307,"per_page":50,"lastupdated":"2018-11-14","total":15312},
  [{"indicator":{
        "id":"SP.POP.TOTL",
        "value":"Population, total"
                },
    "country":{
        "id":"1A",
        "value":"Arab World"
              },
    "countryiso3code":"",
    "date":"2017",
    "value":414491886,
    "unit":"",
    "obs_status":"",
    "decimal":0
   },
   .....

And this is my code so far. I have 2 questions within the code. Thanks.

<!DOCTYPE html>
<html lang = "en">
   <head>
      <script src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <script>
      document.addEventListener('DOMContentLoaded',function(){
        document.getElementById('getMessage').onclick=function(){
          req=new XMLHttpRequest();
          req.open("GET",'https://api.worldbank.org/v2/countries/all/indicators/SP.POP.TOTL?format=json',true);
          req.send();
          req.onload=function(){
            json=JSON.parse(req.responseText);

            json = json.filter(function(val) {
              return (val[0]);                 //:question:**isn't filter supposed to return ONLY the values that pass...? This is returning the opposite...??**
            });

            console.log(json[0]); //:question:If val[0] gives me an array with 50 elements, why won't json[0] = val[0][0]...?


            // document.getElementsByClassName('message')[0].innerHTML=json;
          };
        };
      });
      </script>

      <button id="getMessage">
        Get Message
      </button>


      <p class="message">
        The message will go here
      </p>
   </body>
</html>
3

What are you filtering for? The function within the filter either returns true to keep the current item, or false to drop it. Right now, for each element of the array you’re saying “if the first element of this sub-array is ANY non-false value, return true.” Is that your intent?

4

Thanks Tobias! That was helpful. I was thinking that the code meant, “does the first element of this sub array exist”.