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

Question

>我正在尝试对API进行两次调用。第一次调用是在页面加载时，以显示 API 评分最高的十个电视节目。现在工作正常。 现在的问题是搜索结果何时应该显示在页面上。我希望带有 id 的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的。将 HTMLimage行更改为类似

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