Can not find my mistake in „Active learning: Working through a JSON example“

MDN Learn
#1

Hi, I just finisehd the example „Active learning: Working through a JSON example“ .
When I open the console I get the following error-message:

“heroes.html:54 Uncaught TypeError: Cannot read property ‘length’ of undefined
at showHeroes (heroes.html:54)
at XMLHttpRequest.request.onload (heroes.html:38)”

I already started to replace the mentioned lines with the code form the “heroes-finished.html” . I even tried to replace the whole function, but it is still not working.

What else would you recommend to find the bug ?

Thanks for help,
Raphael

#2

Hi @r.p.e.arw, I’d be happy to try and figure it out. Can you post a copy of the JS source code as you had it when you were getting the error?

#3

Hi @chrisdavidmills, that’s nice of you. Here the code:

<title>Our superheroes</title>

<link href="https://fonts.googleapis.com/css?family=Faster+One" rel="stylesheet"> 
<link rel="stylesheet" href="style.css">

  <header>

  </header>

  <section>

  </section>

<script>
var header = document.querySelector('header');
var section = document.querySelector('section');

    
var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
var request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseText = 'json'; 
request.send();

    
request.onload = function() {
var superHeroes = request.response;
populateHeader(superHeroes);
showHeroes(superHeroes);
}

function populateHeader(jsonObj) {
  var myH1 = document.createElement('h1');
  myH1.textContent = jsonObj['squadName'];
  header.appendChild(myH1);

  var myPara = document.createElement('p');
  myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + ' // Formed: ' + jsonObj['formed'];
  header.appendChild(myPara);
    }

function showHeroes(jsonObj) {
  var heroes = jsonObj['members'];

      for(var i = 0; i < heroes.length; i++) {
        var myArticle = document.createElement('article');
        var myH2 = document.createElement('h2');
        var myPara1 = document.createElement('p');
        var myPara2 = document.createElement('p');
        var myPara3 = document.createElement('p');
        var myList = document.createElement('ul');


        myH2.textContent = heroes[i].name;
        myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity;
        myPara2.textContent = 'Age: ' + heroes[i].age;
        myPara3.textContent = 'Superpowers:';

        var superPowers = heroes[i].powers;
        for (var j = 0; j < superPowers.length; j++) {
          var listItem = document.createElement('li');
          listItem.textContent = superPowers[j];
          myList.appendChild(listItem);
        }

        myArticle.appendChild(myH2);
        myArticle.appendChild(myPara1);
        myArticle.appendChild(myPara2);
        myArticle.appendChild(myPara3);
        myArticle.appendChild(myList);

        section.appendChild(myArticle);
          }
        }

</script>
#4

This line is the problem. It should be

request.responseType = 'json';

As it was, the object was being returned as a text string, not a json object, so none of the values could be read out of it.