Fetching array from my API and receiving Uncaught TypeError: data is undefined-CodePudding

I was trying to fetch this JSON string/array and display it in a table, but nothing really happens in the console it says - "Uncaught TypeError: data is undefined"

I tried doing it like this, preferably it needs to be in its own JavaScript file and not in the HTML file but I was just testing to see if I could make it work.

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

If I visit the URL manually it gives me this JSON string

{
  "all": [
    {
      "id": 1,
      "firstName": "Fname",
      "lastName": "Lname",
      "email": "[email protected]",
      "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"
        }
      }
    }
  ]
}

As you may have noticed I am a complete beginner to JavaScript.

CodePudding user response：

Someone who answered this post actually gave me the solution but the answer is now gone, and sorry i can not remember your name now.

This is what ended up working for me.

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

Thanks to everyone.

CodePudding user response：

Just remove the .data in your success function and make sure you access that "all" property in the object of your response. I dont know your url so i replaced mine with jsonplaceholder but its basically the same thing

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