Merging multiple objects a array of Objects obtained from server in ANGULAR 4?

Question

I am getting multiple objects from server and i am returning that i want to store them as Array of objects in angular 4 .

service :

  search(term: string): Observable<Array<Object>> {
       let apiURL =`${this.apiRoot}?search=${term}`;
        return this.http.get(apiURL)
          .map(res => {
        return res.json().results.map(items => {
          items.name,
          items.population
        });
         });
      }
   }

Component :

private results : [Object];
this.searchField = new FormControl();
  this.searchField.valueChanges
       .debounceTime(400)
       .distinctUntilChanged()
       .switchMap(term => this.myservice.search(term))
       .subscribe(value => console.log(value) );

}  
}

I am not getting Array of Objects ?

LookForAngular · Accepted Answer · 2017-07-19 14:04:55Z

1

search(term: string): Observable<Array<Object>> {
    let apiURL =`${this.apiRoot}?search=${term}`;

    return this.http.get(apiURL)
        .map(res => res.json().results )
        .flatMap( results => Observable.from(results) )
        //single values remap is happening below
        .map( result => {
            name: result.name,
            population : result.population
        })
        .toArray();
}

The flatmap is used to transform a value ( array ) into an observable that emits single values. The map after the flatMap is used to reshape the items. The final toArray bundle up all the emitted values. This approach may be more verbose than direct mapping inside the first map call, but it is cleaner and can be easily changed, and it is not nested

answered Jul 19, 2017 at 14:04

LookForAngular

1,0708 silver badges18 bronze badges

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

Comments

Lansana Camara · Accepted Answer · 2017-07-19 20:33:42Z

0

You can use concat to concatenate array together. If these are arrays of objects, you will essentially merge the arrays into one big array. For instance, this...

[].concat([{name:'foo'}], [{name:'bar'}], [{name:'baz'}])

...will evaluate to a single array of 3 objects:

[{name:'foo'}, {name:'bar'}, {name:'baz'}]

Even if your objects are not already in an array, you will get the same result doing this:

[].concat({name:'foo'}, {name:'bar'}, {name:'baz'})

So in your code, you should be able to do something like this, given that items.name and items.population are both objects:

search(term: string): Observable<Array<Object>> {
    let apiURL =`${this.apiRoot}?search=${term}`;

    return this.http.get(apiURL)
        .map(res => {
            return res.json().results.map(items => {
                return [].concat(items.name, items.population);
            });
        });
}

EDIT: [].concat(...) returns an array, and it is being returned in map which also returns an array, so that is why you get getting an array or arrays. In order to get an array of objects, do the following:

search(term: string): Observable<Array<Object>> {
    let apiURL =`${this.apiRoot}?search=${term}`;

    return this.http.get(apiURL)
        .map(res => {
            return res.json().results.map(items => {
                return {name: items.name, population: items.population};
            });
        });
}

Now you will get an array of objects, like so:

[{name: ..., population: ...}, {...}]

edited Jul 19, 2017 at 20:33

answered Jul 19, 2017 at 13:47

Lansana Camara

9,90112 gold badges54 silver badges90 bronze badges

4 Comments

LookForAngular Over a year ago

Does the map of results return an array of the whole starting one? It seems like it should return nothing, unless you have a reference to the reducing array. The map fn in an array does return a new array reference

Lansana Camara Over a year ago

The results.map is returning a new array of arrays. If you want one single array, you can use reduce to reduce the multiple arrays into one.

Tarik Sahni Over a year ago

@Lansana i am getting array of array and i want array of objects . Can you please why i am getting this

Lansana Camara Over a year ago

@TarikSahni Updated answer.

Collectives™ on Stack Overflow

Merging multiple objects a array of Objects obtained from server in ANGULAR 4?

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related