Question

我有一个api，其中包含一个对象，该对象包含嵌套在其中的jpeg链接数组。我想将每个图像渲染到HTML文档中，但出现错误

index.js：19未捕获（承诺）TypeError：无法读取属性未定义的“ forEach” 在addDogs（index.js：19）在index.js：30

我假设一旦使用链接获取对象，我们就提取该对象内部的jpeg链接数组，并对它执行forEach（）方法。但是似乎我错了，有人可以帮我吗？我的代码在下面，其中包括HTML文档，JavaScript代码和实际的api。

HTML文件

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Intro to AJAX Practice Tasks</title>
    <script src="src/index.js" charset="utf-8"></script>
  </head>
  <body>
    <h1>Dog CEO</h1>

    <div id="dog-image-container">
      <!-- images here -->
    </div>

    <hr>
    <label for="select-breed">Filter Breeds That Start with:</label>
    <select id="breed-dropdown" name="select-breed">
      <option value="a">a</option>
      <option value="b">b</option>
      <option value="c">c</option>
      <option value="d">d</option>
    </select>

    <ul id="dog-breeds">

    </ul>

  </body>
</html>

JavaScript

const imgUrl = "https://dog.ceo/api/breeds/image/random/4"
const dogsContainer = document.getElementById("dog-breeds")

function addDog(dog) {
    const tr = document.createElement('tr')

    tr.innerHTML = `<img src = ${dog.message} >`

    dogsContainer.append(tr)
}

function addDogs(dogs) {
    for (const key in dogs) {

        const dogImages = dogs[key]

        dogImages.message.forEach((dog) => addDog(dog))

    }
}

function getDogs() {
    return fetch(imgUrl)
            .then((response) => response.json())
}

getDogs()
.then((dogs) => addDogs(dogs))

API（JSON）

{
  "status": "success",
  "message": [
    "https://images.dog.ceo/breeds/komondor/n02105505_4290.jpg",
    "https://images.dog.ceo/breeds/schipperke/n02104365_8190.jpg",
    "https://images.dog.ceo/breeds/entlebucher/n02108000_3306.jpg",
    "https://images.dog.ceo/breeds/keeshond/n02112350_6861.jpg"
  ]
}

Answer 1

您似乎遇到了一个并非真正需要的循环。您的addDogs函数应类似于：

function addDogs(dogs) {
    dogs.message.forEach((dog) => addDog(dog))
}

基本上翻译成“获取dogs对象的message属性，并在其每个元素上调用addDog”。

此外，此时无需访问addDog中的.message属性，因为该函数中的dog参数已经是数组的元素。这样就可以成为：

tr.innerHTML = `<img src="${dog}">`

（请注意，我在其周围加上了引号，并且@Phil在说您的HTML相当混乱时是正确的）。

Answer 2

似乎您的函数addDog中存在错误；本质上，您期望它是一个带有message字段的对象，但是它只是一个字符串，因此要使其正常工作，您可能只需要修复其使用方式即可，例如：


function addDog(imgUrl) {
    const tr = document.createElement('tr')
    tr.innerHTML = `<img src = ${imgUrl} >`
    dogsContainer.append(tr)
}

这是因为您的有效负载包含图像网址数组，但您似乎已经假设它们是对象。

编辑：

实际上，您的addDogs函数似乎也有错误。我建议您将它们合并为类似的内容：

function addDogs(dogs) {
    dogs.message.forEach((img) => function(img){
        const tr = document.createElement('tr')
        tr.innerHTML = `<img src = ${img} >`
        dogsContainer.append(tr)
    }
}

如何从api获取和渲染图像？

2 个答案: