Обнаружена неопределенная ошибка в json с использованием javascript - PullRequest
Новая
       4

Обнаружена неопределенная ошибка в json с использованием javascript

0 голосов
/ 19 апреля 2020

Я использую javascript ajax для извлечения данных с сервера JSON API и хочу показать эти данные в таблице HTML. Но я получаю неопределенную ошибку в данных HTML. То есть 


Name         id
undefined undefined

Вот мой код 


<html>

<body>


      <table class = "src">
         <tr><th>Name</th><th>id</th></tr>
         <tr><td><div id="Name"></div></td>
         <td><div id="Id"></div></td></tr>
      </table>



   </body>

</html>
<script type="text/javascript">
   var xmlhttp = new XMLHttpRequest();
var url = "https://jsonplaceholder.typicode.com/users";

   xmlhttp.onreadystatechange = function(e) {

               if (this.readyState == 4 && this.status == 200)  {
                  // Javascript function JSON.parse to parse JSON data
                  var jsonObj = JSON.parse(this.responseText);

                  // jsonObj variable now contains the data structure and can
                  // be accessed as jsonObj.name and jsonObj.country.
                  document.getElementById("Name").innerHTML = jsonObj.name;
                  document.getElementById("Id").innerHTML = jsonObj.id;
               }
            }

             xmlhttp.open("GET", url, true);
            xmlhttp.send();
</script>

Что я должен сделать, чтобы восстановить это? Заранее спасибо.

1 Ответ

0 голосов
/ 19 апреля 2020

Проблема в том, что вы пытаетесь получить доступ к объекту, но на самом деле API выдает массив. Вы можете получить первый объект, выполнив jsonObj[0] следующим образом: 

<html>

<body>


      <table class = "src">
         <tr><th>Name</th><th>id</th></tr>
         <tr><td><div id = "Name"></div></td>
         <td><div id = "Id"></div></td></tr>
      </table>



   </body>

</html>
<script type="text/javascript">
   var xmlhttp = new XMLHttpRequest();
var url = "https://jsonplaceholder.typicode.com/users";

   xmlhttp.onreadystatechange = function(e) {

               if (this.readyState == 4 && this.status == 200)  {
                  // Javascript function JSON.parse to parse JSON data
                  var jsonObj = JSON.parse(this.responseText);

                  // jsonObj variable now contains the data structure and can
                  // be accessed as jsonObj.name and jsonObj.country.
                  document.getElementById("Name").textContent = jsonObj[0].name;
                  document.getElementById("Id").textContent = jsonObj[0].id;
               }
            }

             xmlhttp.open("GET", url, true);
            xmlhttp.send();
</script>

См. codesandbox , где работает код.

Редактировать: Как упомянул TJ Crowder , лучше использовать textContent вместо innerHTML, чтобы избежать нежелательного HTML отображения (никогда не доверяйте пользовательскому вводу!).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...