I am currently working on building a web application using Angular that interacts with a REST-oriented server. The server sends JSON arrays (product objects) which I need to filter based on the product type field in the array. Here is a snippet of the JSON data:
{
"name": "Water",
"price": 0.4,
"type": "Drinks",
"idprod": 1,
"description": ""
}
Product model:
export class Producte{
name: string;
price: number;
type: string;
idprod: number;
constructor(pName: string, pPrice: number, pType: string, pIdprod: number){
this.name = pName;
this.price = pPrice;
this.type = pType;
this.idprod = pIdprod;
}
}
Posts service:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class PostsService {
baseUrl: string;
constructor(private http: HttpClient) {
this.baseUrl = 'http://134.122.51.190:8080/Project_Bar/productes';
}
getAll(): Promise<any[]>{
return this.http.get<any[]>(this.baseUrl).toPromise();
}
}
Component that retrieves all the data and stores it in an array:
import { Component, OnInit } from '@angular/core';
import { Producte } from '../../models/producte.model';
import { PostsService } from '../../services/posts.service';
@Component({
selector: 'app-caja',
templateUrl: './caja.component.html',
styleUrls: ['./caja.component.css']
})
export class CajaComponent implements OnInit {
arrPosts: any[]
constructor(private postsService: PostsService) {
this.arrPosts = [];
}
ngOnInit(): void {
this.postsService.getAll()
.then(posts => this.arrPosts = posts)
.catch(error => console.log(error));
}
}
I'm looking for a way to create separate arrays for each type of product (I have only 5 types). Any suggestions would be appreciated.