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!')
      })
    )
}

try this.taskArr = this.taskArr.concat(data); instead? And also, do the console log inside here: data => {this.taskArr.push(data)} because of async — John
– John, Commented Mar 13, 2019 at 19:32
Similar problem here - stackoverflow.com/questions/45518285/… — Kamil Naja
– Kamil Naja, Commented Mar 13, 2019 at 19:32

Rich · Accepted Answer · 2019-03-13 19:48:08Z

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);
}

Ömer Faruk Kırlı · Accepted Answer · 2019-03-13 19:43:19Z

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.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related