Retrieve JSON Data In Angular 5 - json

Question

I am retrieving json data via http.get, my problem is that I cannot get a specific values of my key in typescript.
The data I am returning is in the format (json):
[
{
"id": 1,
"name": "Albany",
"manufacture": "Albany Superior Low Gi Sliced Brown Seed Bread 700g",
"price": 15.49,
"category": "Food",
"type": "Breads",
"image": "data:image/jpeg;base64,/9j/4AAQSkZJ..."
},
{
"id": 2,
"name": "Blue Ribbon",
"manufacture": "Blue Ribbon Brown Plus Low Gi Bread 700g",
"price": 13.99,
"category": "Food",
"type": "Breads",
"image": "data:image/jpeg;base64,/9j/4AAQSkZJRg..."
}
]
In Angular, my service is as below:
export class ProductService {
prodType:ProductModel;
productList:object;
prodList: Array<ProductModel> = [];
prodMap: Map<number, ProductModel>;
constructor( private http: HttpClient ) { }
getAllProducts(): Array<ProductModel>{
this.http.get<Array<ProductModel>>('/product/service/send/all/products').subscribe(
data => {
console.log( data );
},
error => {
console.error("HTTP FAILURE ERROR!!!");
}
);
return this.prodList;
}
getProductByType( productSearch:string ){
this.productList = this.prodList.find( x=> x.getType() == productSearch);
console.log( this.productList);
}
}
The ProductModel is as follows:
export class ProductModel {
private id: number;
private name: string;
private manufacture: string;
private price: number;
private category: string;
private type: string;
private image: string;
// get and setters
The million dollar question; let's say I would to search through my data for product types and only wanted to console-log products with type milk from my json data.
How would I do that? I have searched for similar solution, but they were unhelpful.

Answer 1

First assign the HTTP result to your class member and then filter your datas and then console.log the filtered array items.
export class ProductService {
prodType:ProductModel;
productList:object;
prodList: Array<ProductModel> = [];
prodMap: Map<number, ProductModel>;
constructor( private http: HttpClient ) { }
getAllProducts() {
this.http.get<Array<ProductModel>>('/product/service/send/all/products').subscribe(
datas => {
this.prodList = datas;
},
error => {
console.error("HTTP FAILURE ERROR!!!");
}
);
}
getProductByType( productSearch:string ): Array<ProductModel>{
let filteredProducts:Array<ProductModel> = this.prodList.filter(product => product.type == productSearch);
filteredProducts.forEach(product=> console.log(product);
return filteredProducts;
}
}

Answer 2

You can add the map and modify the response coming from the http get call and filter it before assigning it to the list . of if you want to separate the same then you need split the logic into two methods one to get the vanilla list and then filter the data on top of it
getAllProducts(): Array<ProductModel>{
return this.http.get<Array<ProductModel>>('/product/service/send/all/products').map(data => data.filter(value => value.type == 'milk')).subscribe() ;
}