Угловое 5 Наблюдаемое отображение в массив Json

Question

Мой бэкэнд вернет это:

{
    "FirstResponse": [
        {
            "MyField1": "AAA",
            "MyField2": "AAAAAAA"
        },
        {
            "MyField1": "BBB",
            "MyField2": "BBBBBBB"
        },
        {
            "MyField1": "CCC",
            "MyField2": "CCCCC"
        }
    ],
    "SecondResponse": [
        {
            "FirstName": "FirstNameA",
            "LastName": "LastNameA"
        },
        {
            "FirstName": "FirstNameB",
            "LastName": "LastNameB"
        }
    ]   
}

Я бы хотел сопоставить FirstReponse с переменной и SecondResponse с другой переменной.

Как я могу адаптировать код ниже?

search(): Observable<any> {
  let apiURL = `......`;
  return this.http.get(apiURL) 
      .map(res => res.json())
}

Обновление: ожидаемый результат В одной переменной это:

[
    {
        "MyField1": "AAA",
        "MyField2": "AAAAAAA"
    },  
    {
        "MyField1": "BBB",
        "MyField2": "BBBBBBB"
    },
    {
        "MyField1": "CCC",
        "MyField2": "CCCCC"
    }
]

В секунду:

[
    {
        "FirstName": "FirstNameA",
        "LastName": "LastNameA"
    },
    {
        "FirstName": "FirstNameB",
        "LastName": "LastNameB"
    }
]

Answer 1

Я не понимаю, что вы хотите получить, потому что вы не предоставили примерный результат,

однако попробуйте это - измените строку:

.map(res => res.json())

до

.map(res => res.json().MyValues )

используя это, вы получите на верхнем уровне аналогичный массив, как в ссылке, которую вы предоставили в комментарии ниже вашего вопроса: https://jsonplaceholder.typicode.com/users

ОБНОВЛЕНИЕ (после обновления вопроса 9.10.2018)

В настоящее время .map(res => res.json()) возвращает объект с двумя полями (переменными) «FirstResponse» и «SecondResponse». Вы можете получить к нему доступ, например (я пишу код из головы):

public async loadData() 
{
   let data  = await this.yourService.search().toPromise();

   let firstVariable = data.FirstResponse;
   let secondVariable = data.SecondResponse;     

   ...
}

Так что, как вы описываете в своем вопросе / комментариях в loadData (), вы получите результат в двух переменных, как вы хотите.

Или альтернативный ответ - если вы хотите сделать это внутри search (), вы можете сделать это таким образом, например:

search(): Observable<any> {
  let apiURL = `......`;
  return this.http.get(apiURL) 
      .map( (res) => { 
          let data = res.json();
          return {
              firstVariable: data.FirstResponse,
              secondVariable: data.SecondResponse,  
          }
      })
}

Answer 2

Пожалуйста, проверьте этот подход, используйте import { Http, Response} from '@angular/http'; import { Observable } from 'rxjs/Observable';

public search(){
let apiURL = `https://jsonplaceholder.typicode.com/users`;
return this.http.get(apiURL) 
  .map((res: Response)=> return res.json();)
  .catch((error: Response) => {
        return Observable.throw('Something went wrong');   
  });
}

для этого search() метода вы можете подписаться с вашего компонента.

И если вы хотите отобразить вывод в уважаемый модальный формат, пожалуйста, укажите тот же формат. Так что я могу помочь

Answer 3

Вы можете создать новый файл, который экспортирует класс модели, а затем назначить его возвращаемому типу Observable. Что-то вроде:

новый файл model.ts

class FieldModel {
    Field1: string;
    Field1: string;
}
export class valuesModel {
    MyValues: Array<FieldModel>;
}

на сервисе .ts

import { valuesModel } from 'model';

search(): Observable<valuesModel> {
    let apiURL = `https://jsonplaceholder.typicode.com/users`;
    return this.http.get(apiURL) 
        .map(res => res.json())
}