JSON displaying in html error with nested array?

Question

I am trying to display JSON from an external url, I am right not trying to just get it to display in html any way possible and keeps coming back blank, Console log shows JSON but page is blank. I would eventually want to display it in a list view for phonegap app. I think it has to do with nested arrays but not sure. any help would be appreciated.

the JSON I am pulling is from an php file which creates the JSON.

here is the JSON format

{
"posts": [{
        "post": {
            "ID": "98",
            "TOURN_ID": "USNC2018",
            "YEAR": "2018",
            "START_DATE": "2018-06-21",
            "END_DATE": "2018-06-23",
            "DATE_STRING": "June 21st - 23rd 2018",
            "NAME": "2018 USABA National Goalball Championships",
            "ShortName": "2018 US Nationals",
            "TOURN_TYPE": "Domestic"
        }
        }, {
        "post": {
            "ID": "97",
            "TOURN_ID": "ATL2018",
            "YEAR": "2018",
            "START_DATE": "2018-05-12",
            "END_DATE": "2018-05-13",
            "DATE_STRING": "May 12th-13th 2018",
            "NAME": "2018 USABA Southeast Regional Goalball Tournament",
            "ShortName": "2018 Atlanta",
            "TOURN_TYPE": "Domestic"
        }
        },
    {
        "post": {
            "ID": "1",
            "TOURN_ID": "MI2009",
            "YEAR": "2009",
            "START_DATE": "2009-02-28",
            "END_DATE": "2009-03-01",
            "DATE_STRING": "Feb. 28th - Mar. 1st 2009 ",
            "NAME": "2009 USABA MIDWEST REGIONAL JOHN BAKOS MEMORIAL GOALBALL TOURNAMENT",
            "ShortName": "2009 Michigan",
            "TOURN_TYPE": "Domestic"
        }
    }]
}

Here is my main.js file.

var tournContainer = document.getElementById("tourn-info");

  var ourRequest = new XMLHttpRequest();
  ourRequest.open('GET', 'http://www.goalballscoreboard.net/mobile/downloads/WebServices/Tournnames/Tournnames.php?rows=all');
  ourRequest.onload = function() {
    if (ourRequest.status >= 200 && ourRequest.status < 400) {
      var ourData = JSON.parse(ourRequest.responseText);
      renderHTML(ourData);
    } else {
      console.log("We connected to the server, but it returned an error.");
    }

  };

  ourRequest.onerror = function() {
    console.log("Connection error");
  };
 ourRequest.send();

});

function renderHTML(data) {
  var htmlString = "";

  for (i = 0; i < data.length; i++) {
    htmlString += "<p>" + data[i].NAME ";

    htmlString += '.</p>';

  }

  tournContainer.insertAdjacentHTML('beforeend', htmlString);
}

Here is my html file.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title>Goalball Scoreboard Json Retrieve</title>
    </head>
    <body>    
<h1>JSON and AJAX</h1>
<div id="tourn-info">  
</div>
        <script type="text/javascript" src="js/main.js"></script>
    </body>
</html>

You could probably simplify the JSON in your API. It seems redundant for the elements of `data.posts` to be objects that just have a `post` property containing a nested object. — Barmar, Apr 05 '18 at 01:08

JSON displaying in html error with nested array?

0 Answers0