Retrieve JSON Data In Angular 5

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.

console.log( data.filter(x => x.type== 'Milk') ); see Array.filter() — Satpal
– Satpal, Commented Feb 12, 2018 at 12:43

Okoch · Accepted Answer · 2018-02-12 12:53:12Z

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;

  }  
}

edited Feb 12, 2018 at 12:53

answered Feb 12, 2018 at 12:46

Okoch

4652 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

DESH Over a year ago

I modified my codes and receive this error in my browser: ERROR TypeError: product.getType is not a function

Okoch Over a year ago

in TypeScript accessors are not formatted like get<MemberName> (the Java way) it's myObj.mymeber directly. What's the code you write to make the call ?

DESH Over a year ago

public getType(): string { return this.type; } public getImage(): string { return this.image; }

DESH Over a year ago

What seem's to be the problem?

Okoch Over a year ago

Don't you call getProductByType before all datas are loaded?

Rahul Singh · Accepted Answer · 2018-02-12 12:46:58Z

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() ;
  }

Collectives™ on Stack Overflow

Retrieve JSON Data In Angular 5

2 Answers 2

5 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Related