Как преобразовать объект JSON в массив Typescript в API

Question

У меня есть запрос API, который возвращает следующее:

{
    "FarmerDetails": [
   {
    "userId": 1,
    "id": 1,
    "title": "delectus aut autem",
    "completed": false
  },
  {
    "userId": 1,
    "id": 2,
    "title": "quis ut nam facilis et officia qui",
    "completed": false
  }
]
}

Мне нужно показать заголовок, когда я нажимаю кнопку и когда кнопка нажимает, эта функция «fetchPeople ()» получает вызов.

fetchPeople() {
    this.peopleService.fetchPeople().subscribe((res:any)=>{
      this.people$ = res;
    });
  }

Как я могу преобразовать мой объект в массив в машинописи и показать конкретные или все значения.

Answer 1

Обработка объекта ответа API ничем не отличается от обработки любого другого JSON объекта. Просто запросите его таким же образом.

Получив такой ответ:

{
  "FarmerDetails": [
    // array of objects you want to extract from the response
  ]
}

Вы можете попробовать несколько подходов.

1. Запрос объекта JSON напрямую

fetchPeople() {
  this.peopleService.fetchPeople().subscribe((res:any)=>{
    this.people = res.FarmerDetails;
  });
}

Карта в канале

fetchPeople() {
  this.peopleService.fetchPeople().pipe(
    .map(res => res.FarmerDetails)
  ).subscribe(people => {
    this.people = people;
  });
}

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

Вставить в канал

fetchPeople() {
  this.peopleService.fetchPeople().pipe(
    .pluck('FarmerDetails')
  ).subscribe(people => {
    this.people = people;
  });
}

Аналогично карте, когда служба People выдает значение, похожее на JSON, оно возвращает именованное свойство в функции pluck перед возвратом подписчику.

Подходы 2 и 3 предпочтительнее, поскольку вы можете применять их в своей службе. Предполагая, что они исходят из HTTP-запроса, вы можете использовать канал после get:

export class PeopleService {
  fetchPeople() {
    return this.http.get(url).pipe(
      pluck('FarmerDetails')
    );
  }
}

Кроме того, суффикс «$» для переменных обычно используется для обозначения наблюдаемой. В вашем примере вы просто сохраняете значение, излучаемое наблюдаемой, поэтому было бы сложно назвать его people$. По этой причине я назвал его people.

Answer 2

Когда вы получите ответ от API, он вернется в строковом формате. Итак, вам необходимо преобразовать его в json формат. Разобрать его на json:

this.people=JSON.parse(res);