WedX - журнал о программировании и компьютерных науках

Получите только необходимые данные из rest api

У меня установлен блог WordPress для целей тестирования. У меня есть угловое приложение, которое потребляет api wordpress rest. Приложение вызывает api, который получает категории. В ответе json есть данные, которые я не собираюсь использовать в своем приложении. Итак, я создал модель только с нужным мне значением, таким как имя, название и т. Д. Но когда я утешил ответ, он показывает все данные. как я могу это ограничить?

Код:

модель

  export interface BlogCategoryModel {
    id: number;
    name: string;
    slug: string;
    parent: number;
  }

сервис

  getCategories(): Observable<BlogCategoryModel[]> {
    const url = 'https://blog.varanjith.com/wp-json/wp/v2/categories';
    return this.http.get<BlogCategoryModel[]>(url);
  }

компонент

  ngOnInit() {
    this.blogService.getCategories().subscribe((x: BlogCategoryModel[]) => {
      console.log(x);
    });
  }

вывод

введите здесь описание изображения

Почему я вижу количество и описание в консоли? Что там происходит? Я не включил количество и описание в BlogCategoryModel

typescript angular
12.12.2019

  • Это интерфейс. Тот факт, что параметры отсутствуют в вашем интерфейсе, не означает, что объект, реализующий этот интерфейс, не будет иметь дополнительных полей. Интерфейс просто означает, что следует ожидать наличия этих полей. 12.12.2019

Ответы:


1

Дважды проверьте, как на самом деле работает машинописный текст и HTTP-клиент :)

Если вы предоставите HTTP-клиенту параметр типа, он не будет ничего делать с ответом, а только назначит ему определение типа. Это определение типа может быть любым.

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

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

getCategories(): Observable<BlogCategoryModel[]> {
    const url = 'https://blog.varanjith.com/wp-json/wp/v2/categories';
    return this.http
        .get<BlogCategoryModel[]>(url)
        .pipe(
            map(categories =>
                categories.map(({ id, name, slug, parent }) => ({ id, name, slug, parent }))
            )
        );
}

Это демонстрирует Stackblitz.

12.12.2019
  • Но я думаю, что это немного сбивает с толку, потому что, насколько я помню, http .get ‹BlogCategoryModel› .... будет автоматически отбрасывать его, если я не ошибаюсь, но, по-видимому, он не делает этого в этом случае (возможно, массив?). Метод карты действительно будет работать, но он не идеален, поскольку у вас есть два источника истины (в идеале он должен быть определен только в интерфейсе). 12.12.2019
  • По крайней мере, я не одинок. У меня была такая же мысль: P 12.12.2019
  • Извините, что разочаровал вас, но вы ошибаетесь, Angular не будет автоматически преобразовывать объект. На данный момент это единственно верный путь. 12.12.2019
  • Вы абсолютно правы. В этом случае я бы, вероятно, просто использовал какой-нибудь шаблон адаптера в качестве обходного пути. Спасибо! 12.12.2019
  • Вместо ({ id, name, slug, parent }) => ({ id, name, slug, parent }) предлагаю использовать lodash pick. В конце концов, pick сделает его более читабельным. .pipe(map(categories => categories.map(category => _pick(category, ['id', 'name', 'parent'])))) 12.12.2019
  • @MoxxiManagarm Можно сделать разными способами, да. Это не меняет того факта, что ответ не будет отправлен на объект автоматически :) Спасибо! 12.12.2019

    • 2

    Сам Typescript не говорит API, что он должен и не должен возвращать. Чтобы использовать только эти поля из вашей модели, вы должны обработать ответ в операторе map:

    getCategories(): Observable<BlogCategoryModel[]> {
    const url = 'https://blog.varanjith.com/wp-json/wp/v2/categories';
    return this.http.get<BlogCategoryModel[]>(url).pipe(
       map((result: any[]) => {
           return result.map((category: any) => {
               return {
                   id: caregory.id,
                   name: category.name,
                   slug: category.slag,
                   parent: category.parent
               }
           })
       })
    );
  }
    12.12.2019
    Новые материалы
    Как создать диаграмму градиентной кисти с помощью D3.js
    Резюме: Из этого туториала Вы узнаете, как добавить градиентную кисть к диаграмме с областями в D3.js. Мы добавим градиент к значениям SVG и применим градиент в качестве заливки к диаграмме с..
    Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
    Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..
    Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
    В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..
    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..
    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..
    Для любых предложений по сайту: [email protected]