Marvel API: Using XMLHttpRequest to fetch data

Question

This is my first time using the Marvel API. I'm trying to show the id, image and series of characters using JavaScript but I don't know how to output this information into my HTML.

Any help?

(function() {
  'use strict';

  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'http://gateway.marvel.com/v1/public/characters?ts=1&apikey=xxx');
  xhr.send();

  console.log('Loading...');
  xhr.addEventListener('load', function() {

    //console.log(xhr.responseText);

    var data = JSON.parse(xhr.responseText);
    var resultsLength = data.data.results;

    for (var i = 0; i < resultsLength.length; i++) {

      console.log(resultsLength[i]);
      console.log(resultsLength[i].id);
      console.log(resultsLength[i].name);
      console.log(resultsLength[i].series);

      var id = resultsLength[i].id;
      var nome = resultsLength[i].name;
      var series = JSON.stringify(resultsLength[i].series);

      var ul = document.querySelector('#comics');
      var li = document.createElement('li');
      ul.appendChild(li);

   }

 });

})();

Thanks for your answer @Sil Cia. Based in your answer I'm updating my code bellow. Now I can output in the HTML the series information and other ones.

 var xhr = new XMLHttpRequest(); xhr.open('GET', 'https://gateway.marvel.com/v1/public/characters?ts=1&apikey=xxx'); xhr.send(); console.log('Loading...'); xhr.addEventListener('load', function() { var data = JSON.parse(xhr.responseText); var resultsLength = data.data.results; for (var i = 0; i < resultsLength.length; i++) { var arr = { id: resultsLength[i].id, nome: resultsLength[i].name, series: resultsLength[i].series } var seriesStr = ''; if (arr.series && arr.series.items) { for (var x = 0; x < arr.series.items.length; x++) { seriesStr += '<a href="#">' + arr.series.items[x].name + '</a>'; } } var ul = document.querySelector('#comics'); var li = document.createElement('li'); var id = document.createElement('span'); var nome = document.createElement('span'); var series = document.createElement('span'); id.innerHTML = arr.id; nome.innerHTML = arr.nome; series.innerHTML = seriesStr; li.appendChild(id); li.appendChild(nome); li.appendChild(series); ul.appendChild(li); } });

 <ul id="comics"></ul>

Answer 1

Alright, right now in the series variable, you have an object that looks like this:

{available: 3, collectionURI: " http://gateway.marvel.com/v1/public/characters/1011334/series ", items: Array(3), returned: 3}

What you want to do it to gain access to the items array inside this object, which contains the series name.

so in your code at line:

var series = JSON.stringify(resultsLength[i].series);

you can modify with:

var seriesName = resultsLength[i].series.items[0].name;
//Note: No need for JSON.stringify here

So you are accessing the first item's name in the "items array " inside the "series object ".

The "0" in items[0] should probably be a dynamic value, you will most likely be looping through this items array to display all the series.

Like so:

var seriesItems = resultsLength[i].series.items;
//I changed the variable name not to confuse it with the "series" object

if (seriesItems.length > 0) {
//Check to make sure this character has some available series!

    for (var j = 0; j < seriesItems.length; j++) {
        var li = document.createElement('li');
        var text = document.createTextNode(seriesItems[j].name);
        li.appendChild(text);
        ul.appendChild(li);
    }
} 
else {
  var text = document.createTextNode('The series are unavailable!');
  ul.appendChild(text);
}

Don't forget to go change your API Key now that you have published it online!