Угловой http.get () JSON в собственный класс

Question

Если я определяю класс с помощью:

export class xy {
  name: string;
}

И импортирую JSON с http.get(), который выглядит следующим образом:

[{"name": "peter"},{"name": "andre"}]

Как я могу преобразовать JSON в xy[] легкий путь?Поскольку оба они имеют точную структуру.Есть ли функция для этого или мне нужно создать собственную, которая копирует каждый элемент в xy Массив?

Привет

Answer 1

Вы можете создать свою собственную десериализацию, добавив метод к классу и запустив его в обратном вызове GET, или вы можете использовать для этого библиотеку, такую ​​как cerialize для машинописного текста (не знаю ни одногоотличный вариант для JS, я бы создал ручные методы).

Вот пример:

export class Xy {
  name: string;
  static Deserialize(jsonArray) {
    jsonArray.map((json) => {
      const xy = new Xy();
      xy.name = json.name;
      return xy;
    }
  }
}

И при обратном вызове сделайте что-то вроде:

http.get(...).then((res) => {
  const items = Xy.Deserialize(res);
})

В зависимости от вашего случая, может быть, это точно настроить с помощью обработки ошибок и проверки свойств ..

В случае, если вы используете Typescript, я довольно интенсивно использую библиотеку cerialize, потому что она позволяет использовать декораторы для определениятипы сериализации, которые сокращают накладные расходы при более сложных требованиях к наследованию данных и совместимости API.Библиотека обрабатывает массивы без усилий.Ваш пример будет выглядеть примерно так:

import {serialize} from 'cerialize';

export class Xy {
  @serialize
  public name: string;
}

И при обратном вызове GET:

import {Deserialize} from 'cerialize';

http.get(...).then((res) => {
  const items = Deserialize(res, Xy);
})

Answer 2

Если форма точно такая же, вы можете сделать это:

Object.assign(new xx(), obj);

Где obj - это результат, который вы получите от своего бэкэнда.

Вопрос, который у меня здесь возникает, таков:тебе действительно нужен класс?Если у xy должны быть только поля и никакие методы, вы можете вместо этого использовать интерфейс.

interface xx {
    name: string;
}

Тогда вы сможете использовать this.http.get<xy[]>('path/to/resource')

Answer 3

Вы можете использовать HttpClient.Он принимает универсальный тип для метода get:

this.http.get<xy[]>('YOUR_URL');

Подписка на все, что возвращается из этого get метода, вернет вам массив типа xy

Убедитесь, чтодобавьте HttpClientModule к массиву imports вашего NgModule, прежде чем использовать это.

В идеале у вас должны быть интерфейсы для моделей данных вместо классов.Вот что Angular StyleGuide рекомендует:

Рассмотрите возможность использования интерфейса для моделей данных.

Вот более конкретный пример:

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

export interface Todo {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  todos: Todo[];
  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http.get<Todo[]>('https://jsonplaceholder.typicode.com/todos?userId=1')
      .subscribe(todos => this.todos = todos);
  }
}

Вот Образец StackBlitz с использованием службы JSONPlaceholder Mock Todos.