02-Working with JSON

In this module, we'll start to store and use the JSON data.

Drilling Down

With the JSON, we can drill down into the layers of data with the dot operator.

 function displayResults(json) {
   console.log(json.response.docs);
};

Notice that when we run the app now, we are deeper into the JSON object, deeper into the data:

Screenshot

Storing the data

If we can drill down, we can store that specific data in a variable. Let's do that:

 function displayResults(json) {
  let articles = json.response.docs;
  console.log(articles);
};

If you run the app at this point, you should get the same results in the console:

Screenshot

Starting to Show Results

Let's get to the point where we start to show results. We want to write an if-else statement that will deal with the data using the following logic:

if(no results)
  do something
else
  display the data

Starting with the if

Let's start by stubbing out the if. Notice that we have taken out the console.log(articles):

function displayResults(json) {
  let articles = json.response.docs;

  if(articles.length === 0) {
    console.log("No results");
  } else {
    //Display the data
  }
};

Keeping it simple with this basic console.log will allow us to handle the logic of having no results. This is a common trick to keep momentum. We don't need to get down in the weeds of what is going to happen if there are no results at this moment. We can handle it later. The console statement is a sort of placeholder for now.

The else

Now let's handle the else. The articles variable contains an array of articles, so we can iterate over that array in the else:

function displayResults(json) {
  let articles = json.response.docs;

  if(articles.length === 0) {
    console.log("No results");
  } else {
    for(let i = 0; i < articles.length; i++) {
      console.log(i);
    }
  }
};

Here we write a for loop that will iterate for the length of the articles array. The first set of results holds an array of 10 items(0-9), and we are simply printing out a number for each item in the index:

Screenshot

Again, keeping simple console.logs will help us make sure that we are on the right track as we move through the build.

DOM Container

Now that we are sure we are iterating over the articles properly, we can turn to doing DOM manipulation each time we iterate through the results. Add the following code:

function displayResults(json) {
  let articles = json.response.docs;

  if(articles.length === 0) {
    console.log("No results");
  } else {
    for(let i = 0; i < articles.length; i++) {
      let article = document.createElement('article'); //1
      let heading = document.createElement('h2'); //2

      article.appendChild(heading); //3
      section.appendChild(article); //4
    }
  }
};

Here's what we're doing each time the for loop runs: 1. We create an article variable that will create a node in the DOM that is an article element. Remember that article is an HTML5 element. 2. We also create a heading variable that creates a node in the DOM that is an h2 element. 3. We call appendChild() on the article element. This will create a child node on that element. We pass in heading to the appendChild method. This means that there will be an h2 element created inside each article element. 4. Since we have a section in our original html file, we call the appendChild() method on the section element. We pass in the article to that. This way, the article is a child of section, and the h2 is a grandchild of section.

You should get the following result:

Screenshot

Elements Tab

Take a look at the Elements tab in Chrome Tools to see how this appended to the DOM:

Screenshot

We don't have any actual data showing up, but we have our containers. Let's get the actual data in the next section.