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

Question

我是编程语言的新手。

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

}

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

未捕获的类型错误：无法读取 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，等待调用

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 })

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

问题描述

3 个解决方案

解决方案1
0 2020-03-20 06:52:47

解决方案2
0 2020-03-20 07:08:54

解决方案3
0 2020-03-20 07:32:06

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

问题描述

3 个解决方案

解决方案1 0 2020-03-20 06:52:47

解决方案2 0 2020-03-20 07:08:54

解决方案3 0 2020-03-20 07:32:06

解决方案1
0 2020-03-20 06:52:47

解决方案2
0 2020-03-20 07:08:54

解决方案3
0 2020-03-20 07:32:06