提问人：pichimnc 提问时间：7/26/2023 更新时间：7/26/2023 访问量：16
尝试使用 Async 函数在 OMDBAPI 中获取电影详细信息并将其加载到 HTML 文件中
trying to get the movie details in omdbapi using async function and load it in the html file
问：
我正在尝试使用 omdbapi 并使用异步函数来获取数据。我使用 the 将 转换为数组，以便我可以使用 使用 将数据发送到 innerHTML，但它总是说 .我想使用 a 将其转换为一个新数组，并使用 .请帮忙const dataObject.key()map()undefineddatamap()movieHTML()
const movieListEl = document.querySelector('.shows');
async function main (event) {
const url = `https://www.omdbapi.com/?apikey=39a36280&s=${encodeURI(event)}`;
const search = await fetch(`${url}`);
const data = await search.json();
// console.log(data.Search)
// if (data.Response === 'True') {
// console.log(data.Search)
// }
let dataKeys = Object.keys(data.Search);
movieListEl.innerHTML = dataKeys.map((movie) =>
console.log(movieHTML(movie))).join("");
}
main('squid game');
function movieHTML (details) {
return `<div class="shows__content">
<figure class="shows__poster">
<img src="${details.Poster}" alt="" class="poster">
</figure>
<div class="poster__description">
<h4 class="poster__title">${details.Title}</h4>
<p class="poster__year">${details.Year}</p>
</div>
</div>
`
}
<div class="shows">
</div>答：
1赞
David
7/26/2023
#1
你为什么使用？Object.keys
let dataKeys = Object.keys(data.Search);
movieListEl.innerHTML = dataKeys.map((movie) =>
console.log(movieHTML(movie))).join("");
}
如果你检查你的数据，你会看到这是一个数组。因此，它的“键”是索引值（0、1、2 等）。将这些整数值发送到似乎没有效率。data.SearchmovieHTML()
不要遍历数组的索引，而是遍历数组本身并将其中的每个对象发送到函数：
movieListEl.innerHTML = data.Search.map((movie) =>
console.log(movieHTML(movie))).join("");
}
评论