How to fetch the data from third party REST API and and display on page

I'm new in a programming language.

I want to fetch data from a third-party API (REST) and display data from them to the page.

I need to fetch data from this TVMAZE API and display the data it'has on my site using js.

var foo = null;
        fetch('http://api.tvmaze.com/schedule/full')
        .then(resp => resp.json())
        .then(data => foo = data )
        alert("foo value :" + foo);
        var json_data = foo;

var tbl=$("<table/>").attr("id","mytable");
$("#div1").append(tbl);
for(var i=0; i<json_data.length; i++)
{
    var tr="<tr>";
    var td1="<td>"+ json_data[i]["id"]+"</td>";
    var td2="<td>"+ json_data[i]["name"]+"</td>";
    var td3="<td>"+ json_data[i]["image"]+"</td></tr>";
    var td4="<td>"+ json_data[i]["summary"]+"</td></tr>";
    var td5="<td>"+ json_data[i]["airdate"]+"</td></tr>";
    var td6="<td>"+ json_data[i]["airtime"]+"</td></tr>";
    var td7="<td>"+ json_data[i]["airstamp"]+"</td></tr>";
    var td8="<td>"+ json_data[i]["runtime"]+"</td></tr>";
    var td9="<td>"+ json_data[i]["season"]+"</td></tr>";
    var td10="<td>"+ json_data[i]["language"]+"</td></tr>";
    var td11="<td>"+ json_data[i]["genres"]+"</td></tr>";
    var td12="<td>"+ json_data[i]["country Name"]+"</td></tr>";
    var td13="<td>"+ json_data[i]["code"]+"</td></tr>";
    var td14="<td>"+ json_data[i]["timezone"]+"</td></tr>";
    var td15="<td>"+ json_data[i]["rating Average"]+"</td></tr>";

    
   $("#mytable").append(tr+td1+td2+td3+td4+td5+td6+td7+td8+td9+td10+td11+td12+td13+td14+td15); 
  
}

<!DOCTYPE html>
<html>
  <head>
    <title>fetch Launcher</title>
    
    <style>
        #mytable,td{
    border:1px solid blue;
}
    </style>
      /* Modal Structure */
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <script src="tvmazeapi.js"></script>
    
</head>

 <body >

    <div id="div1"> 
    </div>
    </body>
</html>

but I'm getting an error while displaying.

Uncaught TypeError: Cannot read property 'length' of null

please help me to resolve the issues.

Solution

What you want to do is create a table element and append it to the div then generate a string which has html and then after the loop ends you want to append the string to the div.Also run the Javascript after the document has loaded using $(document).ready(function(){});

Also there are cases where dataitem._embedded.show.network is null so you wanna skip the data append on those you can't access property of null (i have also attached a string which indicates what the td is for , you can remove that if you want)

$(document).ready(function() {
  var foo = null;
  var data = "";
  fetch("http://api.tvmaze.com/schedule/full")
    .then(resp => resp.json())
    .then(json_data => {
      var table = document.createElement("table");
      table.id = "mytable";
      $("#div1").append(table);
      for (let dataitem of json_data) {
        data += "<tr>";
        data += "<td>" + "id=" + dataitem.id + "</td>";
        data += "<td>" + "name=" + dataitem.name + "</td>";
        data += "<td>" + "image=" + dataitem.image + "</td></tr>";
        data += "<tr><td>" + "summary=" + dataitem.summary + "</td></tr>";
        data += "<tr><td>" + "airdate=" + dataitem.airdate + "</td></tr>";
        data += "<tr><td>" + "airtime=" + dataitem.airtime + "</td></tr>";
        data += "<tr><td>" + "airstamp=" + dataitem.airstamp + "</td></tr>";
        data += "<tr><td>" + "runtime=" + dataitem.runtime + "</td></tr>";
        data += "<tr><td>" + "season=" + dataitem.season + "</td></tr>";
        data +=
          "<tr><td>" +
          "language=" +
          dataitem._embedded.show.language +
          "</td></tr>";
        data +=
          "<tr><td>" +
          "genres=" +
          dataitem._embedded.show.genres +
          "</td></tr>";
        if (dataitem._embedded.show.network !== null) {
          data +=
            "<tr><td>" +
            "Country Name=" +
            dataitem._embedded.show.network.country.name +
            "</td></tr>";
          data +=
            "<tr><td>" +
            "Code=" +
            dataitem._embedded.show.network.country.code +
            "</td></tr>";
          data +=
            "<tr><td>" +
            "TimeZone=" +
            dataitem._embedded.show.network.country.timezone +
            "</td></tr>";
        }

        data +=
          "<tr><td>" + dataitem._embedded.show.rating.average + "</td></tr>";
      }
      data += "</table>";
      $("#mytable").append(data);
    });
});

#mytable,
td {
  border: 1px solid blue;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- jquery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <!-- Bootstrap 4 JS -->
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
      integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
      crossorigin="anonymous"
    ></script>
    <!-- CSS File Here -->
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <div id="div1"></div>
    <script src="./index.js"></script>
  </body>
</html>