欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

如何使提取的數據正確顯示？

CSS
方一強1年前9瀏覽0評論

我試圖從三個不同的端點獲取數據，但當獲得劇集的名稱& quot未定義& quot而是返回。我正在為這個網站使用Rick和Morty API。到劇集端點https://rickandmortyapi.com/documentation/#劇集架構的鏈接。任何幫助都將不勝感激。

function getCharacters(done) {
    fetch("https://rickandmortyapi.com/api/character")
        .then(response => response.json())
        .then(data => {
            done(data);
        })
        .catch(error => {
            console.error("Error fetching characters:", error);
        });
}

function getLastKnowLocation(done) {
    fetch("https://rickandmortyapi.com/api/location")
        .then(response => response.json())
        .then(data => {
            done(data);
        })
        .catch(error => {
            console.error("Error fetching last known locations:", error);
        });
}

function getEpisode(done) {
    fetch("https://rickandmortyapi.com/api/episode")
        .then(response => response.json())
        .then(data => {
            done(data);
        })
        .catch(error => {
            console.error("Error fetching episodes:", error);
        });
}


getCharacters(data => {
    data.results.forEach(item => {
        const article = document.createRange().createContextualFragment(/*html*/`
        <article class="character-card">
            <div class="image-container">
                <img src="${item.image}" alt="Character">
            </div>
            <div class="character-info">
                <div class="section">
                    <h2>${item.name}</h2>
                    <span class="status">${item.status} - ${item.species}</span>
                </div>
                <div class="section">
                    <span class="greytext">Last known location:</span>
                    <span>${item.location.name}</span>
                </div>
                <div class="section">
                    <span class="greytext">First seen in:</span>
                    <span>${item.episode.name}</span>
                </div>
            </div>
        </article>
        `);

        const main = document.querySelector("main");
        main.append(article);
    });
});

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

h1{
    text-align: center;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

main {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 18px;
}

.image-container{
    display: flex;
}

.image-container img{
    width: 229.2px;
    height: 220px;
}

article{
    padding: 10px;
    box-shadow: 0px 0px 1px #000;
}

.character-card{
    display: flex;
    margin: 13.5px;
}

.character-info{
    display: flex;
    flex-direction: column;
    padding: 13.5px;
    position: relative;
}

.section{
    display: flex;
    flex-direction: column;
    width: 343.8px;
    height: 64.33px;
}

.greytext{
    color: rgb(158,158,158);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Rick and Morty API</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1>Rick and Morty API</h1>
    <main></main>

    <script src="index.js"></script>
</body>

</html>

每個角色都有一個劇集URL字符串數組。您可以獲取第一個并在嵌套回調中獲取該集的信息。

function getCharacters(done) {
  fetch("https://rickandmortyapi.com/api/character")
    .then(response => response.json())
    .then(data => {
      done(data);
    })
    .catch(error => {
      console.error("Error fetching characters:", error);
    });
}

function getLastKnowLocation(done) {
  fetch("https://rickandmortyapi.com/api/location")
    .then(response => response.json())
    .then(data => {
      done(data);
    })
    .catch(error => {
      console.error("Error fetching last known locations:", error);
    });
}

const main = document.querySelector("main");

getCharacters(data => {
  data.results.forEach(character => {
    fetch(character.episode[0])
      .then(response => response.json())
      .then(episode => {
        main.insertAdjacentHTML('beforeend', `
          <article class="character-card">
            <div class="image-container">
              <img src="${character.image}" alt="Character">
            </div>
            <div class="character-info">
              <div class="section">
                <h2>${character.name}</h2>
                <span class="status">${character.status} - ${character.species}</span>
              </div>
              <div class="section">
                <span class="greytext">Last known location:</span>
                <span>${character.location.name}</span>
              </div>
              <div class="section">
                <span class="greytext">First seen in:</span>
                <span>${episode.name}</span>
              </div>
            </div>
          </article>
        `);
      })
  });
});

*,h1{font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif}.character-info,.image-container,.section{display:flex}*{margin:0;padding:0;box-sizing:border-box}h1{text-align:center}main{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}.image-container img{width:229.2px;height:220px}article{padding:10px;box-shadow:0 0 1px #000}.character-card{display:flex;margin:13.5px}.character-info{flex-direction:column;padding:13.5px;position:relative}.section{flex-direction:column;width:343.8px;height:64.33px}.greytext{color:#9e9e9e}

<title>Rick and Morty API</title>
<h1>Rick and Morty API</h1>
<main></main>