Fetch data from JSON to HTML table using ajax call

Question

I want to fetch data from server and transfer into HTML table. The server contains list of array as below.

[{"date":"19\/08\/2020","weather":"Sunny","temperature":30,"temp_unit":"celcius"}, 
{"date":"30\/08\/2020","weather":"Sunny","temperature":31,"temp_unit":"celcius"}, 
{"date":"21\/08\/2020","weather":"Cloudy","temperature":29,"temp_unit":"celcius"}, 
{"date":"22\/08\/2020","weather":"Sunny","temperature":29,"temp_unit":"celcius"}, 
{"date":"23\/08\/2020","weather":"Sunny","temperature":31,"temp_unit":"celcius"}, 
{"date":"24\/08\/2020","weather":"Sunny","temperature":30,"temp_unit":"celcius"}, 
{"date":"25\/08\/2020","weather":"Cloudy","temperature":28,"temp_unit":"celcius"}, 
{"date":"26\/08\/2020","weather":"Cloudy","temperature":27,"temp_unit":"celcius"}, 
{"date":"27\/08\/2020","weather":"Sunny","temperature":29,"temp_unit":"celcius"}, 
{"date":"28\/08\/2020","weather":"Sunny","temperature":28,"temp_unit":"celcius"}, 
{"date":"29\/08\/2020","weather":"Cloudy","temperature":28,"temp_unit":"celcius"}, 
{"date":"30\/08\/2020","weather":"Sunny","temperature":31,"temp_unit":"celcius"}]

I have created the codes as below to fetch the data using ajax call. But the table shows as undefined for all values.

//implement css in this files
import './style.css';

//jquery already imported
import $ from 'jquery';
// ajax to load

// do table data binding here using data from variable resultArr
var myArray = []

$.ajax({
  method: 'GET',
  url: 'https://www.seetrustudio.com/data.php',
  success: function(response) {
    myArray = response
    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].date}</td>
                            <td>${data[i].weather}</td>
                            <td>${data[i].temperature}</td>
                            <td>${data[i].temp_unit}</td>
                      </tr>`
    table.innerHTML += row
  }
}

The question is how to fix it and pass the list into HTML table correctly?

Does this answer your question? [Parse JSON from JQuery.ajax success data](https://stackoverflow.com/questions/5289078/parse-json-from-jquery-ajax-success-data) — T.Trassoudaine, Oct 22 '21 at 09:21
The [`buildTable` function works fine](https://jsfiddle.net/1a958ecb/) with parsed data. Are you actually getting any data back? Have you checked the console for network errors? You could try adding a `dataType: 'json'` to your AJAX call. — Andy, Oct 22 '21 at 09:21
the `Content-Type` of the response is `text/html; charset=UTF-8`; You are getting raw text, you need to parse it to iterable data with `JSON.parse(response)` — Jeremy Thille, Oct 22 '21 at 09:27

Paul Fitzgerald · Accepted Answer · 2021-10-22T09:28:13.740

The problem is that the response is coming as raw text so you need to JSON.parse the response.

$.ajax({
  method: 'GET',
  url: 'https://www.seetrustudio.com/data.php',
  success: function(response) {
    buildTable(JSON.parse(response));  <---- this line is required.
  }
})

function buildTable(data) {
  var table = document.getElementById('myTable')

  for (var i = 0; i < data.length; i++) {
    var row = `<tr>
                            <td>${data[i].date}</td>
                            <td>${data[i].weather}</td>
                            <td>${data[i].temperature}</td>
                            <td>${data[i].temp_unit}</td>
                      </tr>`
    table.innerHTML += row
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='myTable'></table>

Fetch data from JSON to HTML table using ajax call

1 Answers1