Question

我正在尝试从外部网址显示JSON，我没有尝试让它以任何可能的方式显示在html中并且一直空白，控制台日志显示JSON但页面为空白。我最终希望在phonegap app的列表视图中显示它。我认为它与嵌套数组有关，但不确定。任何帮助将不胜感激。

我提取的JSON来自创建JSON的php文件。

这是JSON格式

{
"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"
        }
    }]
}

这是我的main.js文件。

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);
}

这是我的html文件。

<!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>

JSON在嵌套数组中显示html错误？

0 个答案: