CODEWITHSUNDEEP
angularhttpasynchronouspromiseobservable
Laamiri Oussema
Laamiri Oussema

Reputation: 527

Handle multiple synchronous independent http request Angular 2

I'm trying to build an angular 2 application which shows multiple charts to users and i'm facing a real problem with handling multiple parallel independent http request , i got 505 response when i call more then 2 requests in ngOnInit.

    this._service.getPlant().subscribe(plants => {
    for (var i = 0; i < plants.length; i++)
        for (var name in plants[i]) {
            this.plants.push(plants[i][name]);
            console.log(plants[i][name]);

        }
    this._service.getDept().subscribe(depts => {

        for (var i = 0; i < depts.length; i++)

            for (var name in depts[i]) {
                this.depts.push(depts[i][name]);
                console.log(depts[i][name])

            }
        this._service.getMachines().subscribe(machines => {
            for (var i = 0; i < machines.length; i++)
                for (var MachineName in machines[i]) {
                    machines.push(machines[i][MachineName]);
                    // console.log(machines[i][MachineName]) ;
                }
        });
    });
});

Upvotes: 1

Views: 917

Answers (1)

Aravind
Aravind

Reputation: 41571

You are typing up all service calls inside the subscription instead you should have them independent as below,

this._service.getPlant().subscribe(plants => {
    for (var i=0; i<plants.length; i++)
        for (var name in plants[i]) {
            this.plants.push(plants[i][name]);  
            console.log(plants[i][name]) ;
        }
});
this._service.getDept().subscribe(depts => {
    for (var i=0; i<depts.length; i++)
        for (var name in depts[i]) {  
            this.depts.push(depts[i][name]);
            console.log(depts[i][name])
        }
});
this._service.getMachines().subscribe(machines => {
    for (var i=0; i<machines.length; i++)
        for (var MachineName in machines[i]) {
                machines.push(machines[i][MachineName]);  
                // console.log(machines[i][MachineName]) ;
        }
 });

Update based on comment:

Raising another request after completion of the previous

ngOnInit(){
    this._service.getPlant().subscribe(plants => {
        for (var i=0; i<plants.length; i++)
            for (var name in plants[i]) {
                this.plants.push(plants[i][name]);  
                console.log(plants[i][name]) ;
            }
    },(error)=>{},
        ()=>{
        /////////////////////////////
        // Completion event handler
        /////////////////////////////
            this.getDepartments();
        });

    private getDepartments(){
        this._service.getDept().subscribe(depts => {
            for (var i=0; i<depts.length; i++)
                for (var name in depts[i]) {  
                    this.depts.push(depts[i][name]);
                    console.log(depts[i][name])
                }
        },(error)=>{},
        ()=>{
        /////////////////////////////
        // Completion event handler
        /////////////////////////////
            this.getMachines();
        });
    }
    private getMachines(){

        this._service.getMachines().subscribe(machines => {
            for (var i=0; i<machines.length; i++)
                for (var MachineName in machines[i]) {
                        machines.push(machines[i][MachineName]);  
                        // console.log(machines[i][MachineName]) ;
                }
         });
    }
}

Upvotes: 3

Related Questions