angular - сделать HTTP-запрос для длины массива и конкретного ответа на массив

Question

Я новичок в угловой.Я работаю с Trello API.У меня есть массив, в котором у меня есть некоторые идентификаторы списка.Я хочу сделать HTTP получить вызов для длины массива списка идентификаторов раз.в этом примере у меня есть два идентификатора, поэтому HTTP-вызов должен выполняться два раза.Я получаю карты (массив объектов) в ответ на каждый http-запрос.Я хочу объединить или выдвинуть ответ в одном массиве.В качестве примера ниже я помещаю данные в taskArray, но он ничего не хранит.

для первого вызова с возвратом - data (3) [{…}, {…}, {…}]

для первого вызова return - data (7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]

ожидаемый результат после объединенияis - данные (10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

токовый выход - данные []

// 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

Чтобы расширить комментарий Джона, причина, по которой это не работает, заключается в том, что .push используется для передачи отдельных значений в массив. Вместо этого вы хотите использовать .concat, поскольку он используется для объединения двух массивов.

Например,

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

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

В вашем коде вы должны concat получить результат от http к вашему taskArr. Вам также не нужно передавать результаты http и отображать их. Он уже возвращает наблюдаемое, если вы используете 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

Я не совсем уверен, но вы возвращаете канал из вашего service.ts trelloCall (), а затем вы пытаетесь подписать его. Вы уверены, что результат трубы возвращает Observable?

Я использовал подобные сервисы;

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

Вызов этой услуги;

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

Вы можете просто получить свои результаты с помощью .subscribe, но если вы хотите сделать это, как я, вы можете использовать .map

В моем коде я получаю результаты в виде .subscribe.