Angular loop through array and collect Observables with forkJoin

Question

I have a method which gets an array of strings (tagArray: string[]) as input. Now I loop through this array and perform a search (via POST) to the server to check if the tag is already in the database.

If the tag exists, the corresponding tag object is returned by the server and stored in another array (searchFilter: { tags: Tag[] }[]).

If it does not exist, another POST request is made to the server to store the missing tag in the backend and after that, the tag object created gets stored in searchFilter['tags'].

performTagMatching(tagArray: string[]):any {
  for(let tagElem of tagArray) {
    // create search request for tag lookup
    const searchRequest: SearchRequest = { term: tagElem, operation: 'exact'};

    this.apiClientService.findTagByTitle(searchRequest).subscribe(
      (response) => {
        // Check tag search result for existence of tag
        if(response.length == 0) {
          // No tag found -> create tag and add to search tag list
          this.searchFilter['tags'].push(this.saveNewTag(tagElem));
        } else {
          // Tag found -> add to search tag list
          this.searchFilter['tags'].push(response[0]);
        }
      },
      (error) => {
        console.log(error);
      }
    );
  }
}

How can I put this in a forkJoin so that I can return the Observable of the forkJoin?

I have two problems here:

I need the 'tagElem' in the response which I can't access anymore after I left the for-loop
I don't know how I can push the Observables into an array an return that to the method caller

Sachila Ranawaka · Accepted Answer · 2017-10-02 16:06:07Z

1

separate your http call from the for loop and call it as a separate function.

performTagMatching(tagArray: string[]): any {
    for (let tagElem of tagArray) {
        // create search request for tag lookup
        const searchRequest: SearchRequest = {
            term: tagElem,
            operation: 'exact'
        };

        this.callMactchFunc(tagElem)
    }
}

private callMactchFunc(tagElem) {
    this.apiClientService.findTagByTitle(searchRequest).subscribe(
        (response) => {
            // Check tag search result for existence of tag
            if (response.length == 0) {
                // No tag found -> create tag and add to search tag list
                this.searchFilter['tags'].push(this.saveNewTag(tagElem));
            } else {
                // Tag found -> add to search tag list
                this.searchFilter['tags'].push(response[0]);
            }
        },
        (error) => {
            console.log(error);
        }
    );
}

answered Oct 2, 2017 at 16:06

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

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

1 Comment

user1337 Over a year ago

But my problems remains: how can I put all requests into a forkJoin and still access the tagElem when subscribing to the forkJoin later?

Collectives™ on Stack Overflow

Angular loop through array and collect Observables with forkJoin

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related