时间戳

首页 > 解决方案 > 无法通过 JavaScript 将 Json 解析为 Html

javascript - 无法通过 JavaScript 将 Json 解析为 Html

问题描述

我有以下称为 HTML 页面的 onload 的 JavaScript 函数，但我的数据没有被解析，也不能通过这个函数在 html 中写入任何内容：

function displaySearchResults(){
    //link base para a realização de requests para a API
    var requestBaseURL = "https://api.predicthq.com/v1/events?";

    var startDate = "start.gte=" + sessionStorage.getItem("startDate") + "&";
    var endDate = "start.lte=" + sessionStorage.getItem("endDate") + "&";
    var eventType = "category=" + sessionStorage.getItem("eventType") + "&";
    var countrySearch = "country=" + sessionStorage.getItem("countrySearch");

    var requestURL = requestBaseURL + startDate + endDate + eventType + countrySearch;

    var searchRequest = new XMLHttpRequest();
    searchRequest.withCredentials = false;

    searchRequest.addEventListener("readystatechange", function () {
    if (this.readyState === this.DONE) {
        var data = JSON.parse(this.responseText);
        console.log(data);
        //TODO parse data into lists with associated buttons
        var result = data.results
        var msg = ""
        for (var i=0;i < result.length;i++) {
            msg += ("<li>" + result[i].title + "</li>\n");
        }
        msg = "<li>END</li>"
        document.getElementsById("searchResults").innerHTML=msg;
}
    });
}

来自请求和 de END msg 的任何数据都不会传递到此 HTML 页面：

(...)

<script type="text/javascript" src="js/script.js"></script>
</head>
<body onload="displaySearchResults()">
    <header id="header">

    </header>
    <div class="container">
        <div class="row">
            <h5>Resultados:</h5>
            <ul id="searchResults">

            </ul>
        </div>
    </div>
</body>

我试过在最后和body标签之后调用它，结果相同。如果它在加载时为什么没有出现任何内容，控制台也不会显示任何错误。

标签： javascripthtml

解决方案

尝试这个。它有一个按钮，单击时会在 dom 中呈现列表。

var data = {
  results: [{
    title: "title1"
  }, {
    title: "title2"
  }, {
    title: "title3"
  }]
}


function LoadResult() {
  var result = data.results
  var msg = "<ul>"
  result.forEach(s => {
    msg = msg + "<li>" + s.title + "</li>"
  })
  msg = msg + "<li>END</li></ul>"
  document.getElementById("result").innerHTML = msg;
}
<html>

<body>
  <button onClick="LoadResult()">Load</button>
  <div id="result">

  </div>
</body>

</html>

推荐阅读