我是編程語言的新手。我想從第三方 API (REST) 獲取數(shù)據(jù)并將數(shù)據(jù)顯示到頁面。我需要從這個 TVMAZE API 獲取數(shù)據(jù)并使用 js 在我的網(wǎng)站上顯示它的數(shù)據(jù)。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 回答
料青山看我應(yīng)如是
TA貢獻1772條經(jīng)驗 獲得超8個贊
您想要做的是創(chuàng)建一個table元素并將其追加到 ，div然后生成一個字符串html，然后在循環(huán)結(jié)束后您想要將該字符串追加到 。div在文檔加載后也可以使用以下命令運行 Javascript$(document).ready(function(){});
另外，有些情況下dataitem._embedded.show.network為 null，因此您想跳過那些無法訪問 null 屬性的數(shù)據(jù)附加（我還附加了一個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 關(guān)注
- 109 瀏覽
添加回答
舉報
0/150
提交
取消