Извлечение массива из моего API и получение неучтенной ошибки типа: данные не определены

ProgramBox

Извлечение массива из моего API и получение неучтенной ошибки типа: данные не определены

Post author:admin
Запись опубликована:8 января, 2022
Post category:Вопросы по программированию

#javascript #json #rest

Вопрос:

Я пытался извлечь эту строку/массив JSON и отобразить ее в таблице, но на самом деле в консоли ничего не происходит, там написано — «Ошибка типа не обнаружена: данные не определены».

Я попытался сделать это так, желательно, чтобы это было в собственном файле JavaScript, а не в файле HTML, но я просто проверял, смогу ли я заставить его работать.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<style>
  th {
    color: #fff;
  }
</style>

<table class="table table-striped">
  <tr class="bg-info">
    <th>First</th>
    <th>Last</th>
    <th>Email</th>
  </tr>
  <tbody id="myTable">
  </tbody>
</table>
<script>
  var myArray = []

  $.ajax({
    method: 'GET',
    url: 'My-Servers-API',
    success: function(response) {
      myArray = response.data
      buildTable(myArray)
      console.log(myArray)
    }
  })

  function buildTable(data) {
    var table = document.getElementById('myTable')
    for (var i = 0; i < data.length; i  ) {
      var row = `<tr>
                            <td>${data[i].first_name}</td>
                            <td>${data[i].last_name}</td>
                            <td>${data[i].email}</td>
                      </tr>`
      table.innerHTML  = row
    }
  }
</script>

Если я перейду по URL-адресу вручную, он выдаст мне эту строку JSON

 {
  "all": [
    {
      "id": 1,
      "firstName": "Fname",
      "lastName": "Lname",
      "email": "email@email.com",
      "phones": [
        {
          "number": 12344567
        }
      ],
      "hobbies": [
        {
          "id": 1,
          "name": "golf",
          "wikiLink": "www.golf.com",
          "category": "ball-and-club",
          "type": "outdoors"
        }
      ],
      "address": {
        "street": "StreetName",
        "additionalInfo": "StreetInfo",
        "cityInfo": {
          "zipCode": "0001",
          "city": "CityName"
        }
      }
    }
  ]
}

Как вы, возможно, заметили, я полный новичок в JavaScript.

1. Я вообще не вижу .data собственности в JSON. console.log(response) и загляните в консоль.

2. @hanlet Ty за ваш ответ, не знакомый с тем, что вы имеете в виду .данные, я сделал консоль. войдите и получите это обратно. Это было слишком долго, как и pastebin: ссылка

3. data Свойство не включено response , поэтому при установке myArray = response.data оно устанавливается myArray в значение undefined. Передача этого значения buildTable означает, что data в этой функции не определено. Просто позвони buildTable(response) вместо этого.

4. @Heretic Monkey Спасибо за редактирование, оно все еще не заполняет таблицу, к сожалению, но спасибо за предложение

5. Вы получаете ошибку о data том, что она не определена? Я никогда не говорил, что это исправит все ваши проблемы, только ту, на которую вы жаловались :). Например, вы, возможно, захотите позвонить buildTable(response.all) вместо этого, я не знаю; это ваши данные и ваш проект — вам нужно немного подумать здесь…

Ответ №1:

Просто удалите .данные в вашей функции успеха и убедитесь, что вы получили доступ к этому свойству «все» в объекте вашего ответа. Я не знаю вашего URL-адреса, поэтому я заменил свой на jsonplaceholder, но это в основном одно и то же

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<style>
  th {
    color: #fff;
  }

</style>

<table class="table table-striped">
  <tr class="bg-info">
    <th>name</th>
    <th>username</th>
    <th>Email</th>
  </tr>
  <tbody id="myTable">
  </tbody>
</table>
<script>
  var myArray = []

  $.ajax({
    method: 'GET',
    url: 'https://jsonplaceholder.typicode.com/users',
    success:  function(response) {
      myArray = response
       console.log(myArray)
      buildTable(myArray)
     
    }
  })

  function buildTable(data) {
    var table = document.getElementById('myTable')
    for (var i = 0; i < data.length; i  ) {
      var row = `<tr>
                            <td>${data[i].name}</td>
                            <td>${data[i].username}</td>
                            <td>${data[i].email}</td>
                      </tr>`
      table.innerHTML  = row
    }
  }

</script>

Ответ №2:

Кто-то, кто ответил на этот пост, на самом деле дал мне решение, но ответа сейчас нет, и, к сожалению, я не могу вспомнить ваше имя сейчас.

Это то, что в конечном итоге сработало на меня.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<style>
  th {
    color: #fff;
  }
</style>

<table class="table table-striped">
  <tr class="bg-info">
    <th>name</th>
    <th>username</th>
    <th>Email</th>
  </tr>
  <tbody id="myTable">
  </tbody>
</table>
<script>
  var myArray = []

  $.ajax({
    method: 'GET',
    url: 'My-Server-Url',
    success: function(response) {
      myArray = response
      console.log(myArray)
      buildTable(myArray)

    }
  })

  function buildTable(data) {
    var table = document.getElementById('myTable')
    for (var i = 0; i < data.all.length; i  ) {
      const da = data.all[i];
      var row = `<tr>
                        <td>${da.first_name}</td>
                        <td>${da.last_name}</td>
                        <td>${da.email}</td>
                  </tr>`
      table.innerHTML  = row
    }
  }
</script>

Спасибо всем.

Метки: Извлечение массива из моего API и получение неучтенной ошибки типа: данные не определены