angular - make HTTP request for array length times and concat response to array

Question

I am new to angular. I am working with trello API. I have an array in which I have some list ID's. I want to make HTTP get call for list id array length times. in the example I have two ID's so the HTTP call should be done for two times. I get cards (array of objects) as response in each http request. I want to concat or push response in one array. as bellow example I push data to the taskArray but it does not store anything.

for first call it return - data (3) [{…}, {…}, {…}]

for first call it return - data (7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]

expected output after concatenation is - data (10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

current output is - data []

//component.ts

public listArr = ['5c78bebad10c40163a4f8fc6', '5c7cf40cb8f22b26862602aa'];
public taskArr = [];

ngOnInit() {
  for (var i = 0; i < this.listArr.length; i++) {
    let apiUrl = 'lists/' + this.listArr[i] + '/cards?key=12345688888888&token=b65ss88rhsnjj78925556dkjsagfsv';
    this._service.trelloCall(apiUrl)

      .subscribe(
        data => {
          this.taskArr.push(data)
        }
      }

    console.log('taskArr', this.taskArr)
  }
}

//service.ts

public trelloUrl = 'https://api.trello.com/1/';

trelloCall(apiUrl) {
  return this.http.get < any > (this.trelloUrl + apiUrl)
    .pipe(
      map(data => {
        return data;
      }),
      catchError(error => {
        return throwError('Something went wrong!')
      })
    )
}

Answer 1

To expand on John's comment, the reason this isn't working is that .push is used to push individual values to an array. Instead, you want to use .concat, as that is used to combine two arrays.

For example,

var alpha = ["a", "b", "c"]; 
var numeric = [1, 2, 3];

var alphaNumeric = alpha.concat(numeric); 
//alphaNumeric => [a,b,c,1,2,3]

In your code, you should want to concat the result from the http to your taskArr. You also don't need to pipe your http result and map it. It already returns an observable, assuming your'e using HttpClient.

//component.ts
ngOnInit() {
  this.listArr.forEach( url => {
    let apiUrl = 'lists/' + url + '/cards?key=12345688888888&token=b65ss88rhsnjj78925556dkjsagfsv';
    this._service.trelloCall(apiUrl).subscribe(data => this.taskArr.concat(data));
  });
}

//service.ts
trelloCall(apiUrl) {
  return this.http.get(this.trelloUrl + apiUrl);
}

Answer 2

I am not quite sure but you are returning pipe from your service.ts trelloCall() and then you are trying to subscribe it. Are you sure that pipe's result returns Observable?

I have used services like this;

public getSchool() // service.ts
      {
       var url = this.gp.getApiUrl()+"/getEnabledSchool"
        return this.http.get(url);
      }

Calling this service ;

this.sp.getSchool().map((res:any)=> { // getting exact data from response
      let results = [];
      if(res.value == "SUCCESSFUL"){
        res.data['schoolList'].forEach(item =>{
          results.push({schoolName: item.schoolName, schoolId: item.schoolId})
        });
      }
      return results;
    })
    .subscribe(dat =>{
      this.school_list = dat;
    })

You can just get your results with .subscribe but if you want to do process it like i do, you can use .map

In my code i get results as dat in .subscribe.