Данные не отображаются: невозможно прочитать свойство 'slice' из неопределенного - PullRequest
Новая
       42

Данные не отображаются: невозможно прочитать свойство 'slice' из неопределенного

0 голосов
/ 11 декабря 2019

Я пытаюсь отобразить некоторые данные из API, но получаю сообщение об ошибке. Я смог распечатать его на консоли, но не на веб-странице в виде HTML. Ошибка, которую я получаю: Не удается прочитать свойство 'slice' из неопределенного. Я не хочу использовать слайс, но я не уверен, как отобразить данные, не используя слайс. Как я могу отобразить эти данные без использования среза? Данные находятся в объекте 

// 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>

Ответы [ 2 ]

1 голос
/ 11 декабря 2019

В вашем коде вы пытаетесь нарезать объект. Это не сработает, потому что 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>
1 голос
/ 11 декабря 2019

Проблема в том, что API не возвращает массив в этом случае, это всего лишь один объект. Slice будет работать только в том случае, если он вызывается для массива.

...