将 Api 中的数据附加到 Dom

Question

我正在从 API (TMDB) 中获取数据并创建一个数组来遍历数据，我在浏览器的控制台中获得了我想要的所有内容，但我只获得了当我尝试将它附加到 DOM 时的数组。谢谢

const serachbtn = document.querySelector('.search');
const input = document.querySelector('input');

const p = document.createElement('p');
document.body.appendChild(p);


let movieArray = [];


async function getmovie(){

    const inputValue = input.value;

    const apiUrl = `https://api.themoviedb.org/3/search/movie?api_key=${apiKey}&query=${inputValue}`;

    try{

        const response = await fetch(apiUrl);
        const movie = await response.json();

        //const picture = "https://image.tmdb.org/t/p/w500/" + movie.results[0].poster_path;
        
        let movieArray = movie.results;

        movieArray.forEach(searchie => {
            
            console.log("title: "+searchie.original_title);
            console.log("Overview: "+searchie.overview);
            
            p.innerHTML = searchie.original_title;

        });
        
    }catch(error){

        console.log('something went wrong');
    }
}

serachbtn.addEventListener('click', (e)=>{

    e.preventDefault();
    getmovie();

    });

Answer 1

循环会在每次迭代时替换 <p> 标记的 innerHTML，在循环结束时只留下最后一个可见。您可以使用 +=.

附加到 html 而不是替换

运行片段并按“搜索”按钮查看...

const serachbtn = document.querySelector('.search');
const p = document.createElement('p');
document.body.appendChild(p);

async function pretendFetch() {
  const movies = [
    { original_title: 'The Godfather' },
    { original_title: 'Star Wars' },
    { original_title: 'Jaws' },
  ];
  return Promise.resolve(movies);
}

async function getmovie() {
  try {
    const movieArray = await pretendFetch();
    movieArray.forEach(searchie => {
      console.log("title: " + searchie.original_title);

      // this is the important change: append, don't replace
      p.innerHTML += searchie.original_title + '<br/>';
    });
  } catch (error) {
    console.log(error);
  }
}

serachbtn.addEventListener('click', (e) => {
  e.preventDefault();
  getmovie();
});

<button class="search">Search</button>

还有许多其他方法可以添加到 DOM，包括为每个 API 结果添加一个新标签。

为此，您需要在循环中使用 appendChild()，而不仅仅是在开始时。

将 Api 中的数据附加到 Dom

appending data from Api to the Dom

javascript

api

dom