Best way to store multiple string arrays and display it in html

Issue

sorry for the bad title.... I did not know how to name it. I have a little problem. I have an array of Strings, and i want to cut this strings into smaller parts. I used a loop and the split method to do this. But split also returns an array.

What is the best way to store those returned arrays so that I can display it afterwards in a table in my html file?

I hope it will be more clear with my code snippet.

books: string[];
booksDetails: string[][];
...
...
for (var i = 0; i < books.length ; i++) {
  var bookSplit = books[i].split(/(?:\/|-)+/);
  this.booksDetails.push(bookSplit);
}
...

and then display it

<table>
  <thead>
    <tr>
      <th>name</th>
      <th>author</th>
      <th>date</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let book of booksDetails; let i = index" [attr.data-index]="i">
      <td>{{book[i][0]}}</td>
      <td>{{book[i][1]}}</td>
      <td>{{book[i][2]}}</td>
    </tr>
  </tbody>
</table>

Solution

You're halfway there, just nest another ngFor-loop on the <td> element:

...
<tr *ngFor="let book of booksDetails; let i = index" [attr.data-index]="i">
  <td *ngFor="let detail of book; let j = index" [attr.data-index]="j">
    {{detail}}
  </td>
</tr>
...

Edit: You can also use Array.map() instead of the long and unnecessary for-loop:

this.booksDetails = this.books.map(b => b.split(/(?:\/|-)+/));

Answered By - michalwa