Question

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

2020-03-19

955

javascript html javascript-objects dom-events

我是编程语言新手。

我想从第三方 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); 

}

但是我在显示时收到错误，请帮助我解决问题。

Uncaught TypeError: Cannot read property 'length' of null

Answer 1

In html :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <table id="table">
      <tbody id="tbody"><th><td>Id</td><td>Name</td></th></tbody>
    </table>
    <script src="js/my-js.js"></script>
  </body>
</html>

    Javascript : 
     fetch("https://api.github.com/users")
          .then(res => res.json())
          .then(data => {
            console.log(data);
            let tableContainer = document.getElementById("table");
            let tbodyEle = document.getElementById("tbody");
            console.log(tbodyEle);
            for (let i = 0; i < 5; i++) {
              let trEle = document.createElement("tr");
              let tdEle = document.createElement("td");
              let td2Ele = document.createElement("td");
              let pEle = document.createTextNode("p");
              pEle = document.createTextNode(data[i].id);
              let p2Ele = document.createTextNode("p");
              p2Ele = document.createTextNode(data[i].login);
              tdEle.append(pEle);
              td2Ele.append(p2Ele);
              trEle.append(tdEle);
              trEle.append(td2Ele);
              tbodyEle.append(trEle);
              tableContainer.append(tbodyEle);
            }
          });

Answer 2

json_data 即将为空您必须创建 aync，await 调用

const json_data = async () => 
await (await fetch('http://api.tvmaze.com/schedule/full')).json()

并且您必须检查 json_data 不为空

if(json_data != null && json_data.length > 0) 
      //do something

Answer 3

fetch('https://api.tvmaze.com/schedule/full')
  .then((res) => res.json())
  .then((data) => {
    let html = '<table>'
    data.slice(0, 10).forEach((entry) => {
      html += `<tr><td><a href="${entry.url}">${entry.name}</a></td></tr>`
    })
    html += '</table>'
    document.querySelector('body').innerHTML = html
  })