Как отобразить содержимое объекта JSON с несколькими массивами в angular html?
Я создал объект JSON, который содержит массивы, соответствующие полям файла CSV, которые были проанализированы с помощью библиотеки Papa Parse. Я хотел бы отобразить их в HTML, но я не знаю, как извлечь массивы из объекта JSON и поместить их в переменную, чтобы ее можно было отобразить в html.
машинопись
func(){
this.fileHasBeenUploaded = true;
this.csvData = reader.result as string;
console.info(this.csvData);
console.info(this.papa.parse(this.csvData));
this.resultObj = this.papa.parse(this.csvData);}
HTML
<div *ngIf='fileHasBeenUploaded'>
TESTING TESTING:
<div *ngFor = "let i of resultObj">
<span *ngFor = "let j of i">
{{j}}
</span>
</div>
<div>
the array is: {{resultObj}}
</div>
Мои вложенные циклы *ngFor дают ошибку, и попытка отобразить объект напрямую отображает только «[object Object]»
Возможный дубликат Получение имени свойства объекта
Можете ли вы опубликовать пример ваших данных?
Вы хотите показать данные для целей отладки или в элегантном виде? В целях отладки вы можете использовать <pre>{{resultObj | json}}</pre>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Самый простой способ - преобразовать ваш объект, содержащий массивы, в массив, содержащий массивы. *ngFor может перебирать только итерируемые объекты.
модель.ts
export interface ObjectContainingArrays<T = any> {
[key:string]: Array<T>;
}
компонент.ts
public func():void {
this.fileHasBeenUploaded = true;
this.csvData = reader.result as string;
const resultObj:ObjectContainingArrays = this.papa.parse(this.csvData) as any;
this.resultArr = Object.values(resultObj);
}
компонент.html
<div *ngFor = "let i of resultArr">
<span *ngFor = "let j of i">
{{j}}
</span>
</div>
Редактировать: Обновлено для использования любого вместо неизвестного
Редактировать2: удалена аннотация типа в назначении (синтаксическая ошибка).
Я получаю сообщение об ошибке, что PapaParseResult не может быть назначен для типа «ObjectContainingArrays <unkown>», а также «Оператор» < не может быть применен к типам «логический» и «число». и "Не удается найти имя "неизвестно""
Поскольку я понятия не имею, что такое PapaParseResult (вы никогда не упоминали этот тип данных), я представил свой собственный, чтобы показать структуру того, что я ожидал от ваших данных. Не стесняйтесь удалить это в вашем случае и вместо этого использовать PapaParseResult. Неизвестный был представлен в недавнем обновлении машинописного текста. Возможно, у вас более старая версия — используйте «любая» вместо неизвестной. Не вижу ничего, что могло бы вызвать ошибку «оператора». Может быть, в коде, который вы не опубликовали?
@ bigcoder536 Извините, у меня была ошибка в коде: this.resultArr была аннотация типа, хотя это присваивание. Я соответствующим образом изменил код.
Вам будет легче искать и вообще говорить о проблеме, если вы просто называете их «объектами» и «массивами», а не упоминаете JSON, если только вы на самом деле не имеете дело с текстовыми/строковыми переменными в JavaScript.