Question

我正在尝试显示来自API的一些数据，但收到错误。我能够将其作为HTML打印到控制台，但不能打印到网页上。我收到的错误是：无法读取未定义的属性“切片”。我不想使用切片，但是我不确定在不使用切片的情况下如何显示数据。如何在不使用切片的情况下显示此数据？数据在对象中

// The first section of data from the API - showing the data structure
{
"id": 1,
"url": "http://www.tvmaze.com/shows/1/under-the-dome",
"name": "Under the Dome",
"type": "Scripted",
"language": "English",
"genres": [
"Drama",
"Science-Fiction",
"Thriller"
],
"status": "Ended",
"runtime": 60,
"premiered": "2013-06-24",
"officialSite": "http://www.cbs.com/shows/under-the-dome/",
"schedule": {
"time": "22:00",
"days": [
"Thursday"
]
},

// Printing the data to the console
//fetch('https://api.tvmaze.com/shows/1?embed=episodes') 
//.then((resp) => resp.json()) 
//.then(function (data) {
//   console.log(data)
//})
fetch('https://api.tvmaze.com/shows/1?embed=episodes') 
.then((resp) => resp.json()) 
.then(function (data) {
   const text = document.querySelectorAll(".text")
    data.results.slice(0, 4).forEach((div, i) => { 
    text[i].innerHTML = ` <h2>${div.url}</h2> 
    <p><strong>${div.name}</strong></p>
    `
      }) 
    })

<!DOCTYPE html>
<html>
    <head>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
            <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
            <link href="https://fonts.googleapis.com/css?family=Alatsi|Dancing+Script|Roboto&display=swap" rel="stylesheet">
            <script src="tv.js"></script>

            <link rel="stylesheet" href="tv.css">
    </head>
    <body>
        <div class="navbar">
            <ul>
                    <li class="header"><h1>Entertainment</h1></li>
                    <li><a href="tv.html">TV</a></li>
                    <li><a href="books.html">Books</a></li>
                    <li><a href="movies.html">Movies</a></li>
                    <li><a href="index.html">Home</a></li>
                  </ul>
        <div class="text">
            </div>
        </div>
    </body>
</html>

Answer 1

问题在于，在这种情况下，API不会返回数组，它只是一个对象。切片仅在数组上调用时才有效。

Answer 2

在您的代码中，您试图在对象上进行切片。那是行不通的，因为slice适用于数组之类的项目。同样在html中，您需要一个div类，希望在数组的每个项目中更改innerHTML。由于类div只有一个text，因此该div将会不断被覆盖。因此，text[i].innerHTML在这种情况下将不起作用。为了绕过该问题，我做了什么，对于在循环中找到的每个项目，我创建了一个新的div元素并将数据插入到新创建的div中。我还取出了slice代码，并遍历了episodes数组中的每个项目，并将新的div附加到了文档的正文中。希望这可以帮助您走上正确的道路。

fetch('https://api.tvmaze.com/shows/1?embed=episodes') 
.then((resp) => resp.json()) 
.then(function (data) {
    var embed = data._embedded;
    var epi = embed .episodes;
    epi.forEach((item,i) => {
    var newDivElement = document.createElement('div');
    newDivElement.className = "text";
    newDivElement.innerHTML = ` <h2>${epi[i].url}</h2> 
    <p><strong>${epi[i].name}</strong></p>`
    document.body.appendChild(newDivElement);
    }) 
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
    <head>
            
            <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
            <link href="https://fonts.googleapis.com/css?family=Alatsi|Dancing+Script|Roboto&display=swap" rel="stylesheet">
            <script src="tv.js"></script>

            <link rel="stylesheet" href="tv.css">
    </head>
    <body>
        <div class="navbar">
            <ul>
                    <li class="header"><h1>Entertainment</h1></li>
                    <li><a href="tv.html">TV</a></li>
                    <li><a href="books.html">Books</a></li>
                    <li><a href="movies.html">Movies</a></li>
                    <li><a href="index.html">Home</a></li>
                  </ul>
        </div>
    </body>
</html>

数据不会出现：无法读取未定义的属性“切片”

2 个答案: