Как получить данные из стороннего REST API и отобразить на странице - PullRequest
Новая
       90

Как получить данные из стороннего REST API и отобразить на странице

0 голосов
/ 19 марта 2020

Я новичок в языке программирования.

Я хочу получить данные из стороннего API (REST) ​​и отобразить данные из них на странице.

Мне нужно получить данные из этого API TVMAZE и отобразить данные, которые есть на моем сайте, с помощью 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: Невозможно прочитать свойство 'length' с нулевым значением

Ответы [ 3 ]

0 голосов
/ 20 марта 2020

json_data приходит в ноль, вы должны создать ayn c, ожидать вызова 

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
0 голосов
/ 20 марта 2020 

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
  })
0 голосов
/ 20 марта 2020 
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);
            }
          });
...