Angular map not looping before returning observable

Question

I'm retrieving http response and i need to extract the json body into array. I successfully retrieved, but main problem is looping through returned data in map. It is not looping before returning observable.

In server class, I'm getting the json response and notice the for loop, it jumps to return res; without looping. Also anything i print inside the forLoop won't work.

  getServers() {
    return this.http.get('https://udemy-ng-http-56bbb.firebaseio.com/data.json')
      .pipe(map
      (res => {
        servers1: any;
        servers1 = res;
        for (const server of servers1) {
          server.name = 'FETCH_' + server.name;
        }
        return res;
      }));
  }

In onGet(), I also tried to loop when i subscribe to it. Still not working

  onGet() {
    this.serverService.getServers().subscribe(
       (response) => {
         for (this.server of response) {
           this.server.name = 'FETCH_' + this.server.name;
           console.log( this.server.name.json());
         }
       },
       (error) => console.log(error)
    );
  }

I expected this forloop to work just like below without pipe. I'm using RxJS 6+ with ..pip(map)... It worked when using rxjs-compat without pipe

  getServers() {
    return this.http.get('https://udemy-ng-http-56bbb.firebaseio.com/data.json').map
      (res => {
        this.servers1 = res;
        for (const server of this.servers1) {
          server.name = 'FETCH_' + server.name;
        }
        return res;
      });
  }

This is the output.

-LdlacC74PPS93h9HzQc: Array(2)
0:
capacity: 10
id: 1108
name: "Testserver"
__proto__: Object
1:
capacity: 100
id: 953
name: "Liveserver"
__proto__: Object
length: 2
__proto__: Array(0)
-LdnUvw_idV440wn3uIA: Array(2)
0:
capacity: 10
id: 6006
name: "Testserver"
__proto__: Object
1:
capacity: 100
id: 4260
name: "Liveserver"
__proto__: Object
length: 2
__proto__: Array(0)
__proto__: Object

The name should be FETCH_ Testserver not just Testserver.

also missed the declaration of servers1. let servers1: any; — Sachila Ranawaka
– Sachila Ranawaka, Commented May 2, 2019 at 12:52

Shashank Vivek · Accepted Answer · 2019-05-02 15:06:20Z

1

Try below:

getServers() {
    return this.http.get('https://udemy-ng-http-56bbb.firebaseio.com/data.json')
      .pipe(map
      (res => this.transformationMethod(res)));
  }

transformationMethod(res){ 
  Object.keys(res.data).forEach(resKey => { 
     const obj = res.data[resKey]; 
     obj.forEach(data => { 
        data.name = 'Fetch_' + data.name; 
     }) 
   }) 
  return res; 
}

For data like:

data = {
    "data": {
      "-LdlacC74PPS93h9HzQc": [{
        "capacity": 10,
        "id": 1108,
        "name": "Testserver"
      }, {
        "capacity": 100,
        "id": 953,
        "name": "Liveserver"
      }],
      "-LdnUvw_idV440wn3uIA": [{
        "capacity": 10,
        "id": 6006,
        "name": "Testserver"
      }, {
        "capacity": 100,
        "id": 4260,
        "name": "Liveserver"
      }]
    }
  };

A sample demo

edited May 2, 2019 at 15:06

answered May 2, 2019 at 13:48

Shashank Vivek

17.6k9 gold badges69 silver badges110 bronze badges

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

6 Comments

KSDev Over a year ago

Ok. I will get back to you.

Shashank Vivek Over a year ago

@KofoworolaSadique : sure, i'll be waiting for your feedback

KSDev Over a year ago

Unfortunately, the output still the same

-LdlacC74PPS93h9HzQc: Array(2) 0: {capacity: 10, id: 1108, name: "Testserver"} 1: {capacity: 100, id: 953, name: "Liveserver"}

KSDev Over a year ago

The name should be FETCH_ Testserver and FETCH_ Liveserver

Shashank Vivek Over a year ago

@KofoworolaSadique : What are -LdlacC74PPS93h9HzQc: Array(2), ?? Share your json response in the question

|

Collectives™ on Stack Overflow

Angular map not looping before returning observable

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related