Как получить данные из стороннего REST API и отобразить на странице - PullRequest
Новая
       7

Как получить данные из стороннего REST API и отобразить на странице

1 голос
/ 19 марта 2020

Я новичок в языке программирования.

Я хочу получить данные из стороннего API (REST) ​​и отобразить данные из них на странице.

Мне нужно получить данные из этого API TVMAZE и отобразить данные, которые есть на моем сайте, используя 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>

, но при отображении отображается ошибка.

Uncaught TypeError: Невозможно прочитать свойство 'length' со значением null

, пожалуйста, помогите мне решить проблемы.

1 Ответ

1 голос
/ 19 марта 2020

То, что вы хотите сделать, это создать элемент table и добавить его к div, затем сгенерировать строку с html, а затем после окончания l oop вы хотите добавить строку к div. Также запускайте Javascript после загрузки документа, используя $(document).ready(function(){});

Также есть случаи, когда dataitem._embedded.show.network имеет значение NULL, поэтому вы хотите пропустить добавление данных для тех, к которым у вас нет доступа к свойству null (я также прикрепил string, который указывает, для чего td, вы можете удалить его, если хотите) 

$(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>
...