Не удалось разобрать Json в Html через JavaScript - PullRequest
Новая
       0

Не удалось разобрать Json в Html через JavaScript

0 голосов
/ 27 мая 2020

У меня есть следующая функция JavaScript, которая вызывается при загрузке страницы HTML, но мои данные не анализируются, и с помощью этой функции ничего нельзя записать в 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;
}
    });
}

Ни данные из запроса, ни сообщение END не передаются на страницу this 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, результат тот же. Если он загружается, почему ничего не появляется, консоль также не показывает ошибок.

1 Ответ

0 голосов
/ 27 мая 2020

Попробуйте это. У него есть кнопка, которая при нажатии отображает список в 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...