Question

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

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

<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>

Files.copy(file.inputstream, this.qrcodeLocation.resolve(fileName))

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>

显示来自api call的搜索结果

1 个答案: