Угловое 6: получить массив объектов из соответствующего JSON через httpClient

kxb спросил: 12 мая 2018 в 04:51 в: arrays

Я пытаюсь заполнить таблицу данными из моего backend API. Таблица ожидает ввода rows, который представляет собой массив объектов, причем каждый объект представляет собой строку в таблице и состоит из пар столбцов / значений. Бэкэнд отправляет массив объектов JSON, таких как:

[{"column1":"val1","column2":"val2"},{"column1":"valA","column2":"valB"}]

Если я просто скопирую и вставляю эту строку в мой .ts-файл и назначаю ее непосредственно свойство rows, все работает правильно:

this.rows = [{"column1":"val1","column2":"val2"},{"column1":"valA","column2":"valB"}]

Это работает независимо от того, определено ли свойство rows как any или Array<DataObject> или что-то среднее между ними. Итак, почему я не могу достичь такой же функциональности через httpClient?

Вот что я до сих пор:

data-service.service.ts:

@Injectable()
export class DataService {    constructor (private http: HttpClient) {}    public getData() {
        return this.http.get<Array<DataObject>>(apiURL, {responseType : 'json'});
    }

табличные-view.route.ts:

export class TableView implements OnInit {    rows: Array<DataObject>;    constructor(dataService: DataService) {
        dataService.getData()
                   .subscribe((result: Array<DataObject>) => this.rows = result)
    }
}
Data-object.ts
export interface DataObject {
    column1: string;
    column2: string;
}
Это похоже, правильно извлекает данные, но набирается неправильно или завернуто в дополнительный объект или что-то еще, и таблица не может его прочитать. Нет ошибок; просто пустой стол. Интересно, что я добавил это в свой html перед объявлением таблицы только для того, чтобы убедиться, что мои данные проходят:
<div>{{rows[0].column1}}</div>

Это правильно выводит "val1", и он неожиданно заполняет таблицу ВСЕ данные. Имеет ли этот доступ каким-то образом изменить тип rows на то, что может понять компонент таблицы?

Я пробовал всевозможные варианты кода выше и без проверки типов; Я попытался удалить заголовок содержимого json, прочитав его как открытый текст, а затем используя JSON.parse(). Я понимаю, что я мог просто перебирать массив, создавая DataObject s и сопоставляя поля отдельно, прежде чем нажимать их на rows, но должен быть более простой способ сделать это, правильно ...? Любое нажатие в правильном направлении было бы оценено.

1 ответ

Есть решение
austinthedeveloper ответил: 12 мая 2018 в 05:38

Я считаю, что это потому, что this.rows = result не заключен в {}. Можете ли вы выйти из своей подписки, чтобы убедиться, что она действительно возвращается?

dataService.getData()
.subscribe(
  (result: Array<DataObject>) => { 
    console.log('success', result);
    this.rows = result
  },
  (error: any) => { 
    console.log('error', error);
  }
)

Я также предлагаю переместить этот вызов в NgOnInit, а не в конструктор.

kxb ответил: 15 мая 2018 в 03:12
Хороший призыв к регистрации; выясняется, что маршрут "Таблица" правильно декодирует объекты из подписки. Проблема в том, что сам компонент таблицы инициализируется до того, как это произойдет, поэтому вход rows пуст. Использование функций поиска / сортировки таблицы, похоже, перепроверяет вход, а затем все отображается правильно. Я собираюсь поиграть с ним. Этот материал времени ответа кажется довольно фундаментальным. Любые предложения по статьям / учебникам, чтобы освежить это?
kxb ответил: 15 мая 2018 в 03:54
Примечание. Я просто обернул компонент таблицы в div с помощью *ngIf="rows" и полностью решил его.