Angular Service function not returning anything, trying to do multiple http requests and return single observable

Question

Unfortunately, the way the site is setup that I need to retrieve data from, is that this data is spread across multiple sites (the exact same type of data and JSON return format) but they are at different URLs. They are classified by the URLs, so I do need to retain the URLs in order to further classify it throughout the app. I have the following service function where I am trying to pass a set of topics (which are then passed to the URL), retrieve the data and return a single observable. However, this is returning nothing:

getDataTopicItems(topicArray) {
    return this.items = topicArray.forEach((topic, i, topicArray) => {
        return this.http.get(this.baseUrl + topic + "/_api/Web/Lists/GetByTitle('What''s New')/items", this.options)
            .map(res => res.json())
            .map(items => items.d.results)
            .do(data => console.log(data))
            .concatMap(data => data)
      }
    )
}

I am subscribing to it in the template of the component where I am calling this function through an *ngFor plus an async pipe. What am I doing wrong?

Update: I also tried the following:

return this.http.get(this.baseUrl + topicArray[0] + this.policyOptions, this.options)
            .map(res => res.json())
            .map(items => this.policies = items.d.results)
            .do(data => console.log(data))
            .flatMap((policies) => topicArray.forEach((topic, i, topicArray) => {
                if (i < 0) {
                    this.http.get(this.baseUrl + topic + this.policyOptions)
                        .map(res => res.json())
                        .map(items => this.policies = items.d.results)
                        .do(data => console.log(data))
                }
            }))

martin · Accepted Answer · 2017-06-06 17:14:18Z

4

Callback function to the Array.forEach method doesn't expect to receive anything, so maybe you wanted to use Array.map instead.

If you're looking for "more RxJS" approach you could use mergeMap to do something like this:

return Observable.from(topicArray)
    .mergeMap(topic => this.http.get(this.baseUrl + topic + "/_api/Web/Lists/GetByTitle('What''s New')/items", this.options)
        .map(res => res.json())
        .map(items => items.d.results)
        .do(data => console.log(data))
        .concatMap(data => data);

Eventually you could use concatMap instead of mergeMap to run all requests in order and use concatAll instead of .concatMap(data => data); which makes it a little more obvious what you were trying to do.

Btw, be aware that by using this.items = ... you just assign an Observable to this.items not the result.

Also note that you need to subscribe to the returned Observable if you want to get any results. For example:

getDataTopicItems([...]).subscribe(result => this.items = result);

See live demo: https://jsbin.com/nuzifo/9/edit?html,js,console

edited Jun 6, 2017 at 17:14

answered Jun 6, 2017 at 16:24

martin

97.4k26 gold badges205 silver badges237 bronze badges

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

8 Comments

kittycatbytes Over a year ago

Thank you for this - how would I subscribe to the result and not the items? Right now I am modifying my code to have a return on the this.http and removing everything above that like this: `` return this.http.get(this.baseUrl + topicArray[0] + "/_api/Web/Lists/GetByTitle('What''s New')/items", this.options) .map(res => res.json()) .map(items => items.d.results) .do(data => console.log(data)) .flatMap(data => topicArray.forEach((topic, i, topicArray) => {drafting more code here}

martin Over a year ago

@kittycatbytes I'm not sure what you mean. I was talking about the this.items property that you assigned an Observable but from its name it looks like you're expecting to assign the result of the Observable chain to it.

martin Over a year ago

And if you use topicArray.map(....) with the code you have right now you'll make an array of Observables which is probably not what you want.

kittycatbytes Over a year ago

I updated my original question to try to instead return the response as chained responses. This also is not working though. It does console.log the first 5 items from the first response.

martin Over a year ago

@kittycatbytes Like this for example: jsbin.com/nuzifo/9/edit?html,js,console

|

Kevin Kipp · Accepted Answer · 2017-06-06 16:05:51Z

1

Array.prototype.forEach returns undefined. See MDN for documentation. Use Array.prototype.map instead, and this.items will be an array of observables that you can then do whatever you want with.

answered Jun 6, 2017 at 16:05

Kevin Kipp

4276 silver badges14 bronze badges

1 Comment

kittycatbytes Over a year ago

Changing forEach to map does not work either. In both cases, it does not console.log the data.

Collectives™ on Stack Overflow

Angular Service function not returning anything, trying to do multiple http requests and return single observable

2 Answers 2

8 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related