title: Fetch data from JSON to HTML table using ajax call
body: <p>I want to fetch data from server and transfer into HTML table. The server contains list of array as below.</p>
  <pre><code>[{&quot;date&quot;:&quot;19\/08\/2020&quot;,&quot;weather&quot;:&quot;Sunny&quot;,&quot;temperature&quot;:30,&quot;temp_unit&quot;:&quot;celcius&quot;}, 
  {&quot;date&quot;:&quot;30\/08\/2020&quot;,&quot;weather&quot;:&quot;Sunny&quot;,&quot;temperature&quot;:31,&quot;temp_unit&quot;:&quot;celcius&quot;}, 
  {&quot;date&quot;:&quot;21\/08\/2020&quot;,&quot;weather&quot;:&quot;Cloudy&quot;,&quot;temperature&quot;:29,&quot;temp_unit&quot;:&quot;celcius&quot;}, 
  {&quot;date&quot;:&quot;22\/08\/2020&quot;,&quot;weather&quot;:&quot;Sunny&quot;,&quot;temperature&quot;:29,&quot;temp_unit&quot;:&quot;celcius&quot;}, 
  {&quot;date&quot;:&quot;23\/08\/2020&quot;,&quot;weather&quot;:&quot;Sunny&quot;,&quot;temperature&quot;:31,&quot;temp_unit&quot;:&quot;celcius&quot;}, 
  {&quot;date&quot;:&quot;24\/08\/2020&quot;,&quot;weather&quot;:&quot;Sunny&quot;,&quot;temperature&quot;:30,&quot;temp_unit&quot;:&quot;celcius&quot;}, 
  {&quot;date&quot;:&quot;25\/08\/2020&quot;,&quot;weather&quot;:&quot;Cloudy&quot;,&quot;temperature&quot;:28,&quot;temp_unit&quot;:&quot;celcius&quot;}, 
  {&quot;date&quot;:&quot;26\/08\/2020&quot;,&quot;weather&quot;:&quot;Cloudy&quot;,&quot;temperature&quot;:27,&quot;temp_unit&quot;:&quot;celcius&quot;}, 
  {&quot;date&quot;:&quot;27\/08\/2020&quot;,&quot;weather&quot;:&quot;Sunny&quot;,&quot;temperature&quot;:29,&quot;temp_unit&quot;:&quot;celcius&quot;}, 
  {&quot;date&quot;:&quot;28\/08\/2020&quot;,&quot;weather&quot;:&quot;Sunny&quot;,&quot;temperature&quot;:28,&quot;temp_unit&quot;:&quot;celcius&quot;}, 
  {&quot;date&quot;:&quot;29\/08\/2020&quot;,&quot;weather&quot;:&quot;Cloudy&quot;,&quot;temperature&quot;:28,&quot;temp_unit&quot;:&quot;celcius&quot;}, 
  {&quot;date&quot;:&quot;30\/08\/2020&quot;,&quot;weather&quot;:&quot;Sunny&quot;,&quot;temperature&quot;:31,&quot;temp_unit&quot;:&quot;celcius&quot;}]
  </code></pre>
  <p>I have created the codes as below to fetch the data using ajax call. But the table shows as undefined for all values.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//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 &lt; data.length; i++) {
      var row = `&lt;tr&gt;
                              &lt;td&gt;${data[i].date}&lt;/td&gt;
                              &lt;td&gt;${data[i].weather}&lt;/td&gt;
                              &lt;td&gt;${data[i].temperature}&lt;/td&gt;
                              &lt;td&gt;${data[i].temp_unit}&lt;/td&gt;
                        &lt;/tr&gt;`
      table.innerHTML += row
    }
  }</code></pre>
  </div>
  </div>
  </p>
  <p>The question is how to fix it and pass the list into HTML table correctly?</p>