如何从第三方 REST API 获取数据并显示在页面上答案

【问题标题】：How to fetch the data from third party REST API and and display on page如何从第三方 REST API 获取数据并显示在页面上
【发布时间】：2020-06-30 17:42:04
【问题描述】：

我是编程语言的新手。

我想从第三方 API (REST) 获取数据并将数据从它们显示到页面。

我需要从此 TVMAZE API 获取数据并使用 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>

但我在显示时遇到错误。

未捕获的类型错误：无法读取 null 的属性“长度”

请帮我解决问题。

【问题讨论】：

标签： javascript html javascript-objects

【解决方案1】：

您要做的是创建一个table 元素并将其附加到div，然后生成一个具有html 的字符串，然后在循环结束后您要将字符串附加到div。在使用$(document).ready(function(){}); 加载文档后也运行 Javascript

还有dataitem._embedded.show.network为空的情况，所以你想跳过那些你不能访问空属性的数据附加（我还附上了一个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>

【讨论】：

感谢您的回复@abdullah，但大多数数据未定义。我尝试获取嵌套但得到相同的结果。
我之前没有看 API，但现在我似乎正在访问一些不存在的对象，例如：json_data[i]["language"] 不存在因此给@987654333 @ .the language 在 show 里面，它本身在 _embedded 里面，（等一下，我会更新答案）
感谢您的回复@Abdullah Abid 现在我尝试获取图像的值，但没有显示数据 += "" + "Image :" + '' + "";
在某些情况下dataitem._embedded.show.image 为空，因此您需要在访问该属性之前进行检查，即if (dataitem._embedded.show.image !== null) { data += "<tr><td>" + "Image :" + '<img src="' + dataitem._embedded.show.image.medium + '"/>' + "</td></tr>"; }
再次感谢您@Abdullah Abid 但是如果可能的话，您能否向我解释一下为什么我们必须检查我们何时知道它存储了一个对象。我们可以限制 for-of 运算符的最大长度吗？