Get JSON info HTML file (Github JSON)

Get JSON info HTML file (Github JSON)
0.0 0

#1

Hello FreeCodeCampers,

I’m using requestURL from the GitHub Worldcup.JSON to show information on my webite. HTML with script code.

The function “populateHeader” gets the correct header information from the JSON file and showing correctly on my website as “World Cup 2018”

When I try to get information about de Group name, team and code I get no result and the HTML page is showing no information. The script code is under : function showGroups(jsonObj) { var GetGroups = jsonObj[‘groups’];

Can someone help me out here, my code is below.

Marcel

<html>
  <head>
    <meta charset="utf-8">

    <title>World Cup 2018 - Groups</title>

    <link href="https://fonts.googleapis.com/css?family=Shrikhand" rel="stylesheet"> 
    <link rel="stylesheet" href="style.css">
  </head>

  <body>

      <header>

      </header>

      <section>

      </section>

    <script>
    var header = document.querySelector('header');
    var section = document.querySelector('section');
    
    var requestURL = 'https://raw.githubusercontent.com/openfootball/world-cup.json/master/2018/worldcup.groups.json';
    var request = new XMLHttpRequest();
    request.open('GET', requestURL);
    request.responseType = 'json';
    request.send();
    request.onload = function() {
        var WorldCup2018 = request.response;
        populateHeader(WorldCup2018);
        showGroups(WorldCup2018);
    }
    
    function populateHeader(jsonObj) {
        var myH1Head = document.createElement('h1');
        myH1Head.textContent = jsonObj['name'];
        header.appendChild(myH1Head);
        
        var myDate = document.createElement('p');
        myDate.textContent = '14 juni 2018 - 15 juli 2018';
        header.appendChild(myDate);
    }
    
    function showGroups(jsonObj) {
        var GetGroups = jsonObj['groups'];
      
    for (var i = 0; i < GetGroups.length; i++) {
        var myArticle = document.createElement('article');
        var myH2 = document.createElement('h2');
        var myPara1 = document.createElement('p');
        var myPara2 = document.createElement('p');
        var myList = document.createElement('ul');

        myH2.textContent = GetGroups[i].name;
        myPara1.textContent = GetGroups[i].name;
        myPara2.textContent = GetGroups[i].code;
        
        var superPowers = GetGroups[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(myList);

    section.appendChild(myArticle);
    }
}
    </script>
  </body>
</html>