Build a Wikipedia Viewer - Matching variables

JavaScript
1

Here’s my Pen so far: https://codepen.io/GiaFil/pen/GxaVNb
So I am receiving the data from the API but I can’t match the variables here:

json.forEach(function(val) {
  var keys = Object.keys(val);
  html += "<div class = 'cat'>";
  keys.forEach(function(key) {
    html += "<strong>" + key + "</strong>: " + val[key] + "<br>";
  });
  html += "</div><br>";

with the ones in my code. Any suggestions? Also, does this method bypass the fact that I need to know the ids of the pages to access their object?

Edit: The biggest one is the json one because I get an error that it is not defined…

2

there are a couple issues, but let me try and give you some pointers:

  1. You get your data back in the variable data ,yet you are attempting to do your operations on a variable called json which of course correctly errors out as undefined
  2. The forEach method is for arrays, however you are getting your data back as an object, it seems that you have correctly identified the object that you want to extract your information from (data.query.pages), you need to go through each property in this object and extract the information you need, search for the method/s that will enable you to do this, shout out if you can’t find them
3

If I put data instead of json I get: Uncaught TypeError: data.forEach is not a function

4

correct , which goes back to my second point above, which is that the method forEach is for arrays, you need to find a method that parses through objects

5

I’ve fixed some things. Now it doesn’t seem to be able to read the property of ‘title’ of undefined. Why does this happen? Keys is an array and the path i’ve put in the one the console says…

6

ok , you are on the correct path , but you don’t really need another array to push your page objects in.
you could for example do,

for(var val in data.query.pages) {
       if(data.query.pages.hasOwnProperty(val)){
           const pageObject = data.query.pages[val]
           console.log(pageObject.title)
       }
      }

and it would be enough to give you your page titles, I recommend you review the following references for looping through an object:



1 Like