猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

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

我是编程语言的新手。


我想从第三方 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 的属性“长度”

请帮助我解决这些问题。


慕容3067478
浏览 87回答 1
1回答

料青山看我应如是

您想要做的是创建一个table元素并将其追加到 ，div然后生成一个字符串html，然后在循环结束后您想要将该字符串追加到 。div在文档加载后也可以使用以下命令运行 Javascript$(document).ready(function(){});另外，有些情况下dataitem._embedded.show.network为 null，因此您想跳过那些无法访问 null 属性的数据附加（我还附加了一个string指示其用途的文件td，如果需要，您可以将其删除）$(document).ready(function() {&nbsp; var foo = null;&nbsp; var data = "";&nbsp; fetch("http://api.tvmaze.com/schedule/full")&nbsp; &nbsp; .then(resp => resp.json())&nbsp; &nbsp; .then(json_data => {&nbsp; &nbsp; &nbsp; var table = document.createElement("table");&nbsp; &nbsp; &nbsp; table.id = "mytable";&nbsp; &nbsp; &nbsp; $("#div1").append(table);&nbsp; &nbsp; &nbsp; for (let dataitem of json_data) {&nbsp; &nbsp; &nbsp; &nbsp; data += "<tr>";&nbsp; &nbsp; &nbsp; &nbsp; data += "<td>" + "id=" + dataitem.id + "</td>";&nbsp; &nbsp; &nbsp; &nbsp; data += "<td>" + "name=" + dataitem.name + "</td>";&nbsp; &nbsp; &nbsp; &nbsp; data += "<td>" + "image=" + dataitem.image + "</td></tr>";&nbsp; &nbsp; &nbsp; &nbsp; data += "<tr><td>" + "summary=" + dataitem.summary + "</td></tr>";&nbsp; &nbsp; &nbsp; &nbsp; data += "<tr><td>" + "airdate=" + dataitem.airdate + "</td></tr>";&nbsp; &nbsp; &nbsp; &nbsp; data += "<tr><td>" + "airtime=" + dataitem.airtime + "</td></tr>";&nbsp; &nbsp; &nbsp; &nbsp; data += "<tr><td>" + "airstamp=" + dataitem.airstamp + "</td></tr>";&nbsp; &nbsp; &nbsp; &nbsp; data += "<tr><td>" + "runtime=" + dataitem.runtime + "</td></tr>";&nbsp; &nbsp; &nbsp; &nbsp; data += "<tr><td>" + "season=" + dataitem.season + "</td></tr>";&nbsp; &nbsp; &nbsp; &nbsp; data +=&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "<tr><td>" +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "language=" +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dataitem._embedded.show.language +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "</td></tr>";&nbsp; &nbsp; &nbsp; &nbsp; data +=&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "<tr><td>" +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "genres=" +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dataitem._embedded.show.genres +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "</td></tr>";&nbsp; &nbsp; &nbsp; &nbsp; if (dataitem._embedded.show.network !== null) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data +=&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "<tr><td>" +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "Country Name=" +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dataitem._embedded.show.network.country.name +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "</td></tr>";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data +=&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "<tr><td>" +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "Code=" +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dataitem._embedded.show.network.country.code +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "</td></tr>";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data +=&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "<tr><td>" +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "TimeZone=" +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dataitem._embedded.show.network.country.timezone +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "</td></tr>";&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; data +=&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "<tr><td>" + dataitem._embedded.show.rating.average + "</td></tr>";&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; data += "</table>";&nbsp; &nbsp; &nbsp; $("#mytable").append(data);&nbsp; &nbsp; });});#mytable,td {&nbsp; border: 1px solid blue;}<!DOCTYPE html><html>&nbsp; <head>&nbsp; &nbsp; <!-- jquery -->&nbsp; &nbsp; <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>&nbsp; &nbsp; <!-- Bootstrap 4 JS -->&nbsp; &nbsp; <script&nbsp; &nbsp; &nbsp; src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"&nbsp; &nbsp; &nbsp; integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"&nbsp; &nbsp; &nbsp; crossorigin="anonymous"&nbsp; &nbsp; ></script>&nbsp; &nbsp; <!-- CSS File Here -->&nbsp; &nbsp; <link rel="stylesheet" href="./index.css" />&nbsp; </head>&nbsp; <body>&nbsp; &nbsp; <div id="div1"></div>&nbsp; &nbsp; <script src="./index.js"></script>&nbsp; </body></html>
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

Html5