0

I have created a JSON object which contains arrays, corresponding to the fields of a CSV file, which were parsed using the library papa Parse. I'd like to display these in HTML, but I don't know how to go about extracting the arrays from the JSON object and putting them into a variable to that it can be displayed in html.

typescript

 func(){
    this.fileHasBeenUploaded = true;
    this.csvData = reader.result as string;
    console.log(this.csvData);
    console.log(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>

My nested *ngFor loops give an error, and trying to display the object directly only displays "[object Object]"

bigcoder536
  • 5
  • 3
  • 1
    You'll have an easier time searching and in general talking about the issue, if you just call them "objects" and "arrays" rather than mentioning JSON, unless you are actually dealing with text/string-valued variables in JavaScript. – Heretic Monkey Jul 15 '19 at 19:27
  • Possible duplicate of [Getting the object's property name](https://stackoverflow.com/questions/4260308/getting-the-objects-property-name) – nll_ptr Jul 15 '19 at 19:36
  • 1
    can you post an example of your data ? – Nadhir Falta Jul 15 '19 at 19:39
  • Do you wanna show the data for debugging purpose or in an elegant way? For debugging purposes you can use `
    {{resultObj | json}}
    `     – julianobrasil Jul 15 '19 at 20:51

1 Answers1

0

The simpliest way would be to transform your object containing arrays into an array containing arrays. *ngFor can only iterate over iterables.

model.ts

export interface ObjectContainingArrays<T = any> {
    [key:string]: Array<T>;
}

component.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);
}

component.html

<div *ngFor="let i of resultArr">
   <span *ngFor="let j of i">
      {{j}}
    </span>
</div>

Edit: Updated to use any instead of unknown

Edit2: Removed type annotation in assignment (syntax error)

pascalpuetz
  • 5,238
  • 1
  • 13
  • 26
  • I'm getting the error that PapaParseResult is not assignable to type 'ObjectContainingArrays as well as " Operator '<' cannot be applied to types 'boolean' and 'number'." and "Cannot find name 'unknown'" – bigcoder536 Jul 15 '19 at 21:04
  • Since I have no idea what PapaParseResult is (you never mentioned that data type), I introduced my own to show the structure of what I expected your data to look like. Feel free to remove that in your case and use PapaParseResult instead. Unknown was introduced in a recent typescript update. Maybe you have an older version - use "any" instead of unknown. Can't see anything that might cause the "operator" error. Maybe in code that you didn't post? – pascalpuetz Jul 15 '19 at 21:10
  • @bigcoder536 Ah sorry, I had a mistake in my code: `this.resultArr` had a type annotation, even though it's an assignment. I adjusted the code accordingly. – pascalpuetz Jul 15 '19 at 21:14