json - 愚蠢的“错误错误:尝试区分“[对象对象]”时出错。只允许使用数组和可迭代对象'
问题描述
我无法让它工作,我知道我错过了一些愚蠢的东西......无论我尝试什么,我都会收到这个错误:“错误错误:尝试区分'[object Object]'时出错。只允许使用数组和可迭代对象“我到底错过了什么。我知道这很愚蠢,但我无法在任何地方在线找到答案。无论我尝试什么,我总是会回到这个错误。
服务代码:
SearchByTitle(title: string) {
const url = `${this.url}&s=${title}`;
return this.http.get<Movies[]>(url)
.pipe(
retry(1),
catchError(this.handleError)
);
}
我收到了我的服务的回复。我可以将它记录到控制台。它是有效的 JSON 数据。我的模型与我的 JSON 响应相匹配。
组件代码
title = 'AngMDB';
movieData: Movies[] = [];
constructor(private movieService: MovieService){ }
ngOnInit() {
this.GetData();
}
// Fetch movie data
GetData() {
this.movieService.SearchByTitle('star')
.subscribe((res: Movies[]) => {
this.movieData = res;
console.log(JSON.stringify(res));
},
error => {
console.log("An unexpected error has occured.");
}
);
return this.movieData;
}
HTML
<div class="content">
<button id="searchBtn" (click)="GetData">Search</button>
<div class="movieList" *ngIf="movieData">
<div class="movies" *ngFor="movie of movieData">
<p class="movieTitle">Movies</p>
</div>
</div>
</div>
API 响应
{"Search":[{"Title":"Star Wars: Episode IV - A New Hope","Year":"1977","imdbID":"tt0076759","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BNzVlY2MwMjktM2E4OS00…ctYzhkZGM3YzA1ZWM2XkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_SX300.jpg"},{"Title":"Star Wars: Episode V - The Empire Strikes Back","Year":"1980","imdbID":"tt0080684","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BYmU1NDRjNDgtMzhiMi00…ItZDNiZjU5NTU4OTE0XkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_SX300.jpg"},{"Title":"Star Wars: Episode VI - Return of the Jedi","Year":"1983","imdbID":"tt0086190","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BOWZlMjFiYzgtMTUzNC00…MtZmNhMTczNTk0ODk1XkEyXkFqcGdeQXVyNTAyODkwOQ@@._V1_SX300.jpg"},{"Title":"Star Wars: Episode VII - The Force Awakens","Year":"2015","imdbID":"tt2488496","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BOTAzODEzNDAzMl5BMl5BanBnXkFtZTgwMDU1MTgzNzE@._V1_SX300.jpg"},{"Title":"Star Wars: Episode I - The Phantom Menace","Year":"1999","imdbID":"tt0120915","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BYTRhNjcwNWQtMGJmMi00…ItODVmMTdjNWI0ZDA2XkEyXkFqcGdeQXVyNTAyODkwOQ@@._V1_SX300.jpg"},{"Title":"Star Wars: Episode III - Revenge of the Sith","Year":"2005","imdbID":"tt0121766","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BNTc4MTc3NTQ5OF5BMl5BanBnXkFtZTcwOTg0NjI4NA@@._V1_SX300.jpg"},{"Title":"Star Wars: Episode II - Attack of the Clones","Year":"2002","imdbID":"tt0121765","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BMDAzM2M0Y2UtZjRmZi00…EtOTE3NzU5ZDVlMTU5XkEyXkFqcGdeQXVyNDUyOTg3Njg@._V1_SX300.jpg"},{"Title":"Star Trek","Year":"2009","imdbID":"tt0796366","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BMjE5NDQ5OTE4Ml5BMl5BanBnXkFtZTcwOTE3NDIzMw@@._V1_SX300.jpg"},{"Title":"Star Wars: Episode VIII - The Last Jedi","Year":"2017","imdbID":"tt2527336","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BMjQ1MzcxNjg4N15BMl5BanBnXkFtZTgwNzgwMjY4MzI@._V1_SX300.jpg"},{"Title":"Rogue One: A Star Wars Story","Year":"2016","imdbID":"tt3748528","Type":"movie","Poster":"https://m.media-amazon.com/images/M/MV5BMjEwMzMxODIzOV5BMl5BanBnXkFtZTgwNzg3OTAzMDI@._V1_SX300.jpg"}],"totalResults":"3612","Response":"True"}
解决方案
您的服务返回带有电影数组的对象和“totalResults”等附加信息,您需要通过从响应对象中获取“搜索”字段来获取电影数组。所以只要改变
this.movieData = res;
至
this.movieData = res.Search;
在您的 GetData 函数中
推荐阅读
- reactjs - React Firebase 防止 axios 中的令牌过期
- go - 从 Windows 10 交叉编译到树莓派 CGO_ENABLED = 1
- vba - VBA 在条件格式方面遇到问题 excel
- google-apps-script - 当带有公式的单元格的值发生变化时,是否有触发功能?
- python - 按数据框中的字符串过滤并添加单独的值
- javascript - Jest ioredis mock - 将模拟绑定到模块
- c - waitpid() 总是返回 '-1'
- database - 我无法在 Apache NetBeans 12.3 上创建数据库
- python - Python 红黑树中的 TNULL
- flutter - 获取信息以在颤动中详细显示页面的最佳方法是什么?