显示来自 api 调用的搜索结果

Question

我正在尝试对 API 进行两次调用。第一次调用是在页面加载时，显示 API 中评分最高的十个电视节目。现在工作正常。 现在的问题是何时应该在页面上显示搜索结果。我希望带有 id app 的 div 得到更新并显示用户在输入字段中写入的搜索结果。

我在 Javascript 部分遇到问题，这是肯定的。请帮忙 ：） 第二个 API 调用无法正常工作，我试图以与第一个工作相同的方式进行操作。

// show the shows with highest ranking
fetch('https://api.tvmaze.com/shows')
    .then(blob => blob.json())
    .then(json => {
        const topTenShows = json
        .filter(show => show.rating.average) 
        .sort((a, b) => a.rating.average > b.rating.average ? -1 : 1) 
        .slice(0, 9) // tar element 0-9 i arrayen

    return topTenShows
  })
  .then(shows => {
    const app = document.getElementById('app')

    app.innerHTML = shows.map(show => `
      <div class="col-sm movie-content">
        <img src="${show.image.medium}">
        <div class="movie-info">
          <h5>${show.name}</h5>
          <span>Rating: ${show.rating.average}</span>
          <br />
          <span>Rating: ${show.genres}</span>
        </div>
      </div>

    `).join()
  })

// show the search results
function searchTvAmaze ({ target }) {
    fetch(`https://api.tvmaze.com/search/shows?q=${target.value}`)
        .then(blob => blob.json())
        .then(shows => {
            const app = document.getElementById('app')

        app.innerHTML = shows.map(show => `
          <div class="col-sm movie-content">
            <img src="${show.image.medium}">
            <div class="movie-info">
              <h5>${show.name}</h5>
              <span>Rating: ${show.rating.average}</span>
              <br />
              <span>Rating: ${show.genres}</span>
            </div>
          </div>

        `).join()
      })
  }

  const inputSearchField = document.querySelector('.inputSearchField')
  inputSearchField.addEventListener('keydown', searchTvAmaze)

<div class="col-sm-10 main-content">
    <div class="search">
        <input class="inputField inputSearchField" type="text" placeholder="Search...">
    </div>  
    <div class="container">

        <div id="app" class="row">

        </div>
    </div>

</div>

Answer 1

如果您偶然通过https 提供页面，您将无法从fetch 获得对http 端点的响应。所以，把第二个fetch的协议改成https而不是http。

API 响应的结构如下：

[
  { score: 20, show: {
    language: "English",
    // other properties
  }},
  // other found items
]

当你这样做时

app.innerHTML = shows.map(show =>

show 引用具有 score 和 show 属性的对象 - 它不引用 show 属性本身。所以，改成：

app.innerHTML = shows.map(({ show }) =>

解构参数。

另一个问题是找到的节目的image 属性并不总是存在 - 有时，它是null。将image HTML 行更改为类似

${show.image ? `<img src="${show.image.medium}">` : ''}

有时，结果中也没有其他属性 - 您必须进行适当的测试。

这是一个大部分工作版本的示例：

// show the shows with highest ranking
fetch('https://api.tvmaze.com/shows')
    .then(blob => blob.json())
    .then(json => {
        const topTenShows = json
        .filter(show => show.rating.average) 
        .sort((a, b) => a.rating.average > b.rating.average ? -1 : 1) 
        .slice(0, 9) // tar element 0-9 i arrayen

    return topTenShows
  })
  .then(shows => {
    const app = document.getElementById('app')

    app.innerHTML = shows.map(show => `
      <div class="col-sm movie-content">
        <img src="${show.image.medium}">
        <div class="movie-info">
          <h5>${show.name}</h5>
          <span>Rating: ${show.rating.average}</span>
          <br />
          <span>Rating: ${show.genres}</span>
        </div>
      </div>

    `).join()
  })

// show the search results
function searchTvAmaze ({ target }) {
    fetch(`https://api.tvmaze.com/search/shows?q=${target.value}`)
        .then(blob => blob.json())
        .then(shows => {
            const app = document.getElementById('app')
        app.innerHTML = shows.map(({ show }) => `
          <div class="col-sm movie-content">
            ${show.image ? `<img src="${show.image.medium}">` : ''}
            <div class="movie-info">
              <h5>${show.name}</h5>
              <span>Rating: ${show.rating.average}</span>
              <br />
              <span>Rating: ${show.genres}</span>
            </div>
          </div>

        `).join();
      })
  }

  const inputSearchField = document.querySelector('.inputSearchField')
  inputSearchField.addEventListener('keydown', searchTvAmaze)

<div class="col-sm-10 main-content">
  <div class="search">
    <input class="inputField inputSearchField" type="text" placeholder="Search...">
  </div>
  <div class="container">

    <div id="app" class="row">

    </div>
  </div>

</div>