我正在使用API构建我的第一个网站,我是使用JavaScript的初学者[关闭]

oymdgrw7  于 5个月前  发布在  Java
关注(0)|答案(2)|浏览(54)

**已关闭。**此问题需要debugging details。目前不接受回答。

编辑问题以包括desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem。这将帮助其他人回答问题。
3天前关闭。
这篇文章是编辑并提交审查2天前.
Improve this question
我正在使用OMDb API为VS Code中的一个实践项目构建一个电影搜索平台。
当我试图设置innerHTML时,我的标题总是得到undefined

async function main() {

  let keyword = 'fast';

  const response = await fetch(`https://www.omdbapi.com/?apikey=ba040381&s=${keyword}`);
  const movieData = await response.json();
  const movieListEl = document.querySelector(".movie__list");
  const movies = movieData.Search

  console.log(movieData)

  movieListEl.innerHTML = movies
    .map(
      (movies) =>
        `<div class="movie__card">
          <div class="movie__card--container">
            <h3>${movies.title}</h3>
            <p><b>Year:</b>${movies.year}</p>
            <p><b>Rating:</b>xxxxx</p>
            <p><b>Runtime:</b>xxxxx</p>
            <p><b>Genre:</b>xxxxx</p>
          </div>
        </div>`
    )
    .join("");
}

main();

字符串
这是我的搜索栏的HTML

<div class="input__wrap">
  <input type="text" class="input__txt" placeholder="Search...">
  <div class="search__wrapper">
    <i class="fas fa-search"></i>
  </div>
</div>


我的目标是使搜索栏的功能和实际显示的电影信息。感谢您的任何反馈。

omjgkv6w

omjgkv6w1#

响应不是数组,响应只有一个对象,你不需要调用,你需要直接访问对象或对象值。

const {Title, Year, Genre, Runtime, Ratings} = movieData

字符串

movieData.Title, movieData.Genre ....


然后显示结果

movieListEl.innerHTML = `<div class="movie__card">
      <div class="movie__card--container">
        <h3>${Title}</h3>
        <p><b>Year:</b>000</p>
        <p><b>Rating:</b>xxxxx</p>
        <p><b>Runtime:</b>xxxxx</p>
        <p><b>Genre:</b>xxxxx</p>
      </div>
    </div>`

vktxenjb

vktxenjb2#

你会得到错误,因为movieData是一个对象,你不能在JavaScript中对该对象使用map()方法。如果movieData是一个Array,那么你可以使用map()方法来覆盖数组元素。

相关问题