[英]Get array inside JSON API Response Object
I'm trying to make an application with both a front and a back end.我正在尝试制作一个同时具有前端和后端的应用程序。 I have finished both, but now I'm having some trouble trying to connect them.我都完成了,但现在我在尝试连接它们时遇到了一些麻烦。 I keep getting this error:我不断收到此错误:
catalog.component.ts:45 ERROR Error: NG0900: Error trying to diff '[object Object]'. catalog.component.ts:45 错误错误:NG0900:尝试区分“[object Object]”时出错。 Only arrays and iterables are allowed at DefaultIterableDiffer.diff (core.mjs:28514:19) DefaultIterableDiffer.diff (core.mjs:28514:19) 只允许数组和迭代
First, I'm trying to get the array "response", where the Products are located:首先,我试图获取产品所在的数组“响应”:
PRODUCT.SERVICE.TS产品.服务.TS
public getAll(): Observable<Product[]> {
return this.http.get<Response["response"]>(this.productsUrl);
}
This method receives the following response:此方法收到以下响应:
{
"httpCode": 200,
"message": "OK",
"response": [
{
"pieceName": "Mini Figure Trophy",
"pieceImageURL": "https://www.lego.com/cdn/product-assets/element.img.lod5photo.192x192/6335932.jpg",
"piecePrice": 0.3,
"pieceTag": "Bestseller",
},
{
"pieceName": "Animal No. 17 Dog",
"pieceImageURL": "https://www.lego.com/cdn/product-assets/element.img.lod5photo.192x192/6076467.jpg",
"piecePrice": 2.76,
"pieceTag": "Bestseller",
}
]
}
Then, when my catalog page opens, I run these two functions:然后,当我的目录页面打开时,我运行这两个函数:
CATALOG.COMPONENT.TS目录.组件.TS
ngOnInit(): void {
this.getProducts();
this.searchSubject.subscribe(value => this.searchService.setSearchValue(value));
this.searchService.searchValue$.subscribe(value => {
this.productService.getProductByNameLike(value).subscribe(productsCalled => {
this.products = productsCalled})
})
}
getProducts(): void {
this.productService.getAll().subscribe({ <- Line where the error occurs
next: (productsCalled: Product[]) => {
this.products = productsCalled
this.checkProductsOnCart()
},
error: (err) => console.log(err),
complete: () => console.log("completo")
});
}
But I keep getting the NG0900 error.但我不断收到 NG0900 错误。 I believe it might be because I'm not reading the array where the Products are.我相信这可能是因为我没有读取产品所在的数组。
I have changed the getAll method, as originally it was:我已经更改了 getAll 方法,因为它原来是这样的:
public getAll(): Observable<Product[]> {
return this.http.get<Product[]>(this.productsUrl);
}
I also tried searching for other responses here, but none seem to be applicable to my problem, or maybe I'm just too much of a newbie to see the relation.我也尝试在这里搜索其他响应,但似乎没有一个适用于我的问题,或者我可能只是一个新手,看不到这种关系。 Does anyone know what am I doing wrong here?有谁知道我在这里做错了什么? Thanks in advance.提前致谢。
Your JSON response is an object.您的 JSON 响应是一个对象。
export interface ProductListResponse {
httpCode: Number;
message: string;
response: Product[];
}
Work with map
from rxjs
to return the array from the response
property.使用rxjs
中的map
从response
属性返回数组。
import { map } from 'rxjs';
public getAll(): Observable<Product[]> {
return this.http.get<ProductListResponse>(this.productsUrl)
.pipe(map((data) => data.response));
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.