create a new Observable from array in JSON response

Question

I'm using Angular 7 and have an httpclient request that returns a JSON response that includes a nested array. I'm having trouble returning the array elements as an Observable rather than just a single object. The following extracts the array and returns it as an Observable with single (array) object.

return (this.http.get(url)
  .pipe(
    pluck('candidates')
  )
);

What I want is to return an Observable with one entry for each of the array elements. representative JSON is listed below.

Thanks!

{"spatialReference":{"wkid":4326,"latestWkid":4326},"candidates":[{"address":"80305, Boulder, Colorado","location":{"x":-105.24280489999995,"y":39.983092300000067},"score":100,"attributes":{},"extent":{"xmin":-105.28580489999996,"ymin":39.940092300000067,"xmax":-105.19980489999995,"ymax":40.026092300000066}},{"address":"080305","location":{"x":70.684671556000069,"y":42.633023284000046},"score":100,"attributes":{},"extent":{"xmin":70.671671556000064,"ymin":42.620023284000048,"xmax":70.697671556000074,"ymax":42.646023284000044}},{"address":"80305","location":{"x":-107.45293038699998,"y":24.909200000000055},"score":100,"attributes":{},"extent":{"xmin":-107.88393038699998,"ymin":24.478200000000054,"xmax":-107.02193038699998,"ymax":25.340200000000056}},{"address":"080305","location":{"x":25.969188087000077,"y":43.900496861000079},"score":100,"attributes":{},"extent":{"xmin":25.968188087000076,"ymin":43.899496861000081,"xmax":25.970188087000079,"ymax":43.901496861000076}},{"address":"80305","location":{"x":23.74637722600005,"y":50.135623723000037},"score":100,"attributes":{},"extent":{"xmin":23.728377226000049,"ymin":50.117623723000037,"xmax":23.76437722600005,"ymax":50.153623723000038}},{"address":"80-305","location":{"x":18.55720020800004,"y":54.408705009000073},"score":100,"attributes":{},"extent":{"xmin":18.556200208000039,"ymin":54.407705009000075,"xmax":18.558200208000041,"ymax":54.409705009000071}},{"address":"803","location":{"x":120.28383000000008,"y":22.626259687000072},"score":98,"attributes":{},"extent":{"xmin":120.27383000000007,"ymin":22.61625968700007,"xmax":120.29383000000009,"ymax":22.636259687000074}}]}

In this case, I wanted to grab an embedded element from each of the array items. I also wanted to be able to use other operators (e.g. take()) on the list of array elements. — John Cartwright
– John Cartwright, Commented Dec 28, 2018 at 21:46
Arrays have methods too: array.map(e => e.embeddedElement).slice(0, 5) — JB Nizet
– JB Nizet, Commented Dec 28, 2018 at 22:37

JB Nizet · Accepted Answer · 2018-12-28 17:43:02Z

2

I have no idea why you would want that, but from()creates an observable from an array, emitting every element of the array. So all you need is

return this.http.get<YourObject>(url).pipe(
  switchMap(o => from(o.candidates))
);

answered Dec 28, 2018 at 17:43

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

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

3 Comments

Yanis-git Over a year ago

hi :) i think this.http.get<YourObject>(url).pipe(map(o => o.candidates))and is easier to read

JB Nizet Over a year ago

But it doesn't do what the OP wants.

Yanis-git Over a year ago

yes is true,is just sound not logic but i guess is because we doesn't have the whole context

Collectives™ on Stack Overflow

create a new Observable from array in JSON response

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related