Retrieve the ultimate information from the Angular service

Question

Retrieve the ultimate information from the Angular service

Within my angular 6 project, I am dealing with a product_id array,

product_id: any = ["123", "456"];

ngOnInit :

  ngOnInit() {
    this.product_id.forEach(element => {
      this.httpClient.get('https://api.myjson.com/bins/hiolc').subscribe(res => {
        this.productList = [];
        res.products.forEach( item => {
          this.productList.push(item);
        });
      })
    })
    console.log(this.productList);
  }

When I try console.log(this.productList);, my expected outcome should be:

   [{
      "product_name": "Product One",
      "product_information": {
        "template_details": [
          {
            "template_name": "RACE Template",
            "productProperties": [
              {
                "property_id": 2518427931,
                "property_name": "Length",
                "property_value": "12 cm"
              },
              {
                "property_id": 2621195440,
                "property_name": "Width",
                "property_value": "10 cm"
              },
              {
                "property_id": 2621195441,
                "property_name": "Height",
                "property_value": "20 cm"
              }
            ]
          }
        ]
      }
    },
    {
      "product_name": "Product Two",
      "product_information": {
        "template_details": [
          {
            "template_name": "RACE Template",
            "productProperties": [
              {
                "property_id": 2518427931,
                "property_name": "Length",
                "property_value": "15 cm"
              },
              {
                "property_id": 2621195440,
                "property_name": "Width",
                "property_value": "12 cm"
              },
              {
                "property_id": 2621195441,
                "property_name": "Size",
                "property_value": "Medium"
              }
            ]
          }
        ]
      }
    }]

Instead, I only get an empty array []..

How can I ensure that the data is stored in productList only after the service has completed?

I need to use forEach with this.product_id.forEach(element to retrieve the product list for each product id sent through the URL in my actual application..

Please assist me in storing the data in productList only after all product ids have been processed and the final product list is obtained..

Working stackblitz: https://stackblitz.com/edit/flatternstructure-dvzpjv

Once again, I emphasize that in my real application, I need to pass the id to retrieve the product value like

https://api.myjson.com/bins/hiolc + element

..

Furthermore, once I have the final productList, I need to perform additional functionality with it, which is why I expect the complete data in productList at the end and not within the forEach loop..

javascript angular typescript angular6 angular-services

Answer 1

Answer №1

Consider using rxjs.concat method for concatenating observables:

[edit]

For a working example, check out the code on stackblitz

...
import { concat } from 'rxjs';
import { map } from 'rxjs/operators';
...

ngOnInit() {
  this.productList = [];
  concat(
    this.product_id.map(
      element => this.httpClient.get('https://api.myjson.com/bins/hiolc')
    )
  ).pipe(
    map((res: any) => this.productList = this.productList.concat(res.products))
  ).subscribe(res => {
    console.log(res);
    console.log(this.productList);
  });
}

Hope this solution works for you.

Answer 2

Consider using rxjs.concat method for concatenating observables:

[edit]

For a working example, check out the code on stackblitz

...
import { concat } from 'rxjs';
import { map } from 'rxjs/operators';
...

ngOnInit() {
  this.productList = [];
  concat(
    this.product_id.map(
      element => this.httpClient.get('https://api.myjson.com/bins/hiolc')
    )
  ).pipe(
    map((res: any) => this.productList = this.productList.concat(res.products))
  ).subscribe(res => {
    console.log(res);
    console.log(this.productList);
  });
}

Hope this solution works for you.

Answer 3

Answer №2

There are a couple of issues with your current approach. First, you are logging the data too soon before the requests are even completed. This results in an empty array being displayed. Move the console.log statement below the line where the data is pushed into the array to see the correct results.

The second issue is that you are overwriting the product list with each parallel request. You should only reset the product list once.

A more efficient approach would be to use the forkJoin operator to fire off parallel requests and concatenate the results into the product list. This will provide a cleaner and simpler implementation.

ngOnInit() {
  forkJoin(product_ids)
    .pipe(
       map(id => this.http.get('https://api.myjson.com/bins/hiolc' + id)),
       map(items => this.productList = this.productList.concat(items)),
    )
    .subscribe(() => console.log('Done, items:', this.productList));

Alternatively, you can move your HTTP calls into a service and subscribe to the getProductItems method to update the product list.

 ngOnInit() {
    this.someService.getProductItems(productIds)
        .subscribe(productList => this.productList = productList);
}

By organizing your code in this manner, you can keep your component clean and focused on its core functionality.

Answer 4

There are a couple of issues with your current approach. First, you are logging the data too soon before the requests are even completed. This results in an empty array being displayed. Move the console.log statement below the line where the data is pushed into the array to see the correct results.

The second issue is that you are overwriting the product list with each parallel request. You should only reset the product list once.

A more efficient approach would be to use the forkJoin operator to fire off parallel requests and concatenate the results into the product list. This will provide a cleaner and simpler implementation.

ngOnInit() {
  forkJoin(product_ids)
    .pipe(
       map(id => this.http.get('https://api.myjson.com/bins/hiolc' + id)),
       map(items => this.productList = this.productList.concat(items)),
    )
    .subscribe(() => console.log('Done, items:', this.productList));

Alternatively, you can move your HTTP calls into a service and subscribe to the getProductItems method to update the product list.

 ngOnInit() {
    this.someService.getProductItems(productIds)
        .subscribe(productList => this.productList = productList);
}

By organizing your code in this manner, you can keep your component clean and focused on its core functionality.

Answer 5

Answer №3

Have you considered developing a genuine service in line with the angular documentation?

It seems like you are attempting to integrate the httpClient directly into a component. You can refer to this link for more information: https://angular.io/tutorial/toh-pt4#subscribe-in-heroescomponent

My suggestion would be to start by creating an Injectable service that can be utilized in the component constructor, similar to how you utilize the httpClient.

Next, retrieve the data in the service and subscribe to it for better functionality.

Answer 6

Have you considered developing a genuine service in line with the angular documentation?

It seems like you are attempting to integrate the httpClient directly into a component. You can refer to this link for more information: https://angular.io/tutorial/toh-pt4#subscribe-in-heroescomponent

My suggestion would be to start by creating an Injectable service that can be utilized in the component constructor, similar to how you utilize the httpClient.

Next, retrieve the data in the service and subscribe to it for better functionality.

Answer 7

Answer №4

Why not give this a shot:

ngOnInit() {
    let counter = 0;
    this.itemsList = [];
    this.item_id.forEach(element => {
      this.httpClient.get('https://api.myjson.com/bins/hiolc').subscribe(res => {
        res.items.forEach( item => {
          this.itemsList.push(item);
        });
        counter = counter + 1;
        if(counter === this.item_id.length){
            console.log(this.itemsList);  
            // Execute your next function here
        }
      })
    })
}

Answer 8

Why not give this a shot:

ngOnInit() {
    let counter = 0;
    this.itemsList = [];
    this.item_id.forEach(element => {
      this.httpClient.get('https://api.myjson.com/bins/hiolc').subscribe(res => {
        res.items.forEach( item => {
          this.itemsList.push(item);
        });
        counter = counter + 1;
        if(counter === this.item_id.length){
            console.log(this.itemsList);  
            // Execute your next function here
        }
      })
    })
}

Answer 9

Answer №5

Latest Update:

Here is the solution that can be implemented:

import { combineLatest } from 'rxjs'
....
ngOnInit() {
  const observables = []
  this.product_id.forEach(id => {
    observables.push(this.httpClient.get('https://api.myjson.com/bins/hiolc'))
  })
  combineLatest(...observables).subscribe(response => {
    response.forEach(r => this.productList.push(...r.products))
    console.log(this.productList)
  })
}

Visit stackblitz for live demo: https://stackblitz.com/edit/flatternstructure-nk9yha

Answer 10

Latest Update:

Here is the solution that can be implemented:

import { combineLatest } from 'rxjs'
....
ngOnInit() {
  const observables = []
  this.product_id.forEach(id => {
    observables.push(this.httpClient.get('https://api.myjson.com/bins/hiolc'))
  })
  combineLatest(...observables).subscribe(response => {
    response.forEach(r => this.productList.push(...r.products))
    console.log(this.productList)
  })
}

Visit stackblitz for live demo: https://stackblitz.com/edit/flatternstructure-nk9yha

Answer 11

Answer №6

How about checking out this code snippet? StackBlitz

import { forkJoin } from 'rxjs';

....

ngOnInit() {
    forkJoin(
      this.product_id.map(element => this.httpClient.get('https://api.myjson.com/bins/hiolc'))
    )
    .subscribe((res) => {
        this.productList = this.productList.concat(res);
        console.log(this.productList);
    });
}

Answer 12

How about checking out this code snippet? StackBlitz

import { forkJoin } from 'rxjs';

....

ngOnInit() {
    forkJoin(
      this.product_id.map(element => this.httpClient.get('https://api.myjson.com/bins/hiolc'))
    )
    .subscribe((res) => {
        this.productList = this.productList.concat(res);
        console.log(this.productList);
    });
}

Answer 13

Answer №7

Another way to achieve the same result is:

this.items$ = from(this.item_id).pipe(
    switchMap(() =>  this.httpClient.get('https://api.yourjson.com/bins/abc123')),
    scan((items, item) => [...items, item], [])
    tap((items) => console.log(items))
).subscribe(() => {}) // or use async pipe in a HTML template

Answer 14

Another way to achieve the same result is:

this.items$ = from(this.item_id).pipe(
    switchMap(() =>  this.httpClient.get('https://api.yourjson.com/bins/abc123')),
    scan((items, item) => [...items, item], [])
    tap((items) => console.log(items))
).subscribe(() => {}) // or use async pipe in a HTML template

Retrieve the ultimate information from the Angular service

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

How can I decrypt a JWT token using Angular?

Utilize a directive every instance

Obtain a union type in TypeScript based on the values of a field within another union type

Should I link my Angular Material 2 data table to AngularFire2 or Firebase service?

TypeScript has two variable types

What is the best method for determining the cookie expiration time in AngularJS 1.3?

The request to sign up at 'https://identitytoolkit.googleapis.com/v1/accounts:/signUp? from the origin 'http://localhost:8080' has been denied

The implementation of CORS headers does not appear to function properly across Chrome, Firefox, and mobile browsers

What causes an undefined outcome when a promise is fulfilled?

JavaScript/CSS manipulation: The power of overriding animation-fill-mode

Guide to including objects into your project without the need for babel through the use of CDN

Storing array data locally within an AngularJS application for seamless sharing between two separate applications

Permitted the usage of a global variable of any type as the return value of a function that does not explicitly define its

Having issues with default sorting and searching not functioning in Datatables with Angularjs

Having issues with custom directives not functioning properly within AngularJS' RouteProvider

Input form with multiple fields. Automatically display or hide labels based on whether each field is populated or empty

"Filtering a JSON File Based on Button Data Attributes: A Step-by-

Troubleshooting fastify library errors related to ajv validation

Tips for displaying the default keyboard with numbers and symbols on Ionic applications

Pass the form data to a Bootstrap modal upon submission of the form