如何更改点击链接,以匹配我从其他API请求获取的ID

时间:2018-04-28 01:05:52

标签: javascript api hyperlink

我可能会在标题中表达自己,所以这里是:
我想更改IMDB按钮的链接地址,以便将tvshow ID添加到URL,因此它看起来像这样(https://www.imdb.com/title/tt2861424)。

我有两个单独的API请求(themoviedb API),一个是显示电视节目的详细信息(某些brainiac没有包含imdb_id),另一个请求来自同一API提供商以获取external_ids (以及那种获取imdb_id的方式)。但我无法从第二个请求连接imdb_id,将其放在IMDB按钮上,因此它会将imdb_id添加到URL并打开相应的页面。

另外,它可以工作,我可以在第二个请求上得到imdb_id,但是我必须将它输出到我已经拥有的所有结构之下,并且它将它整个废弃。

function getShowInfo(){
    let showId = sessionStorage.getItem("showId");

    axios.get("https://api.themoviedb.org/3/tv/"+showId+'?api_key=fa155f635119344d33fcb84fb807649b&language=en-US')
        .then((response)=>{
            let series = response.data;
            let output = `
                <div class="moviePage">
                    <div class="poster"><img src="http://image.tmdb.org/t/p/w300/${series.poster_path}"></div>
                    <div class="info">
                        <h2>${series.name}</h2>
                        <ul>
                            <li><strong>Genres:</strong> ${series.genres[0].name}</li>
                            <li><strong>Episode runtime:</strong> ${series.episode_run_time[0]}min </li>
                            <li><strong>Frist air date:</strong> ${series.first_air_date}</li>
                            <li><strong>Networks:</strong> ${series.networks[0].name}</li>
                            <li><strong>Popularity:</strong> ${series.popularity} %</li>
                            <li><strong>Number of episodes:</strong> ${series.number_of_episodes}</li>
                            <li><strong>Number of seasons:</strong> ${series.number_of_seasons}</li>
                            <li><strong>Production companies:</strong> ${series.production_companies[0].name},${series.production_companies[1].name}</li>
                            <li><strong>Status:</strong> ${series.status}</li>
                            <li><strong>Type: </strong>${series.type}</li>
                        </ul>

                        <div class="buttons"> ERROR
                            <a href="https://www.imdb.com/title/???"target="_blank"> IMDB Link </a>
                            <a href="#" onclick="openTrailer()"> Trailer </a>
                            <a href="https://www.titlovi.com/titlovi/?prijevod=${series.name}" target="_blank"> Subtitle </a>
                            <a href="https://www.thepiratebay.org/search/${series.name}" target="_blank"> Pirate bay </a>
                            <a href="javascript:history.back()"> Go back </a>
                        </div>
                    </div>
                </div>
                <div class="plot">
                    <h3>Plot: </h3>
                    <p>${series.overview}</p>
                </div>
            `;
            let info = document.getElementById("movie");
            info.innerHTML = output;
        })
        .catch ((err)=>{
            console.log(err);
        });
        axios.get("https://api.themoviedb.org/3/tv/"+showId+'/external_ids?api_key=fa155f635119344d33fcb84fb807649b&language=en-US')
            .then((response)=>{
                console.log(response)
                let imdb = response.data.imdb_id;
                console.log(imdb);
            })
}

1 个答案:

答案 0 :(得分:2)

使用Promise.all仅在两个回复都返回后创建HTML,以便您可以一次使用imdb_id 系列信息:

function getShowInfo() {
  const showId = sessionStorage.getItem("showId");

  const seriesProm = axios.get("https://api.themoviedb.org/3/tv/" + showId + '?api_key=fa155f635119344d33fcb84fb807649b&language=en-US');
  const imdbProm = axios.get("https://api.themoviedb.org/3/tv/" + showId + '/external_ids?api_key=fa155f635119344d33fcb84fb807649b&language=en-US');
  Promse.all([seriesProm, imdbProm])
    .then(([seriesResp, imdbResp]) => {
      const series = seriesResp.data;
      const imdb_id = imdbResp.data.imdb_id;
      let output = `
        <div class="moviePage">
        <div class="poster"><img src="http://image.tmdb.org/t/p/w300/${series.poster_path}"></div>
        ...
        <a href="https://www.imdb.com/title/${imdb_id}" target="_blank"> IMDB Link </a>
        ...