我是编程语言的新手。我想从第三方 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 的属性“长度”请帮助我解决这些问题。
1 回答
料青山看我应如是
TA贡献1772条经验 获得超8个赞
您想要做的是创建一个table元素并将其追加到 ，div然后生成一个字符串html，然后在循环结束后您想要将该字符串追加到 。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>
<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>
- 1 回答
- 0 关注
- 86 浏览
添加回答
举报
0/150
提交
取消