Multiple array rows split in to table header and table rows in Angular

Question

I have an array with the following structure.

0: "ID,NAME,NUMBER,DESCRIPTION"
1: "123,"PHILIP",0123456789,"OFFICE ADDRESS"
2: "456,"SARA",30345004698,"OFFICE SPACE""

I need to display it in a table. The table header will be the 0th row and remaining rows will be the table body rows (tr). Please help me to achieve this.

I can display the table header but table body is not coming properly.

Table is displaying like below

Please find below my code

tableArray: any;
tableArrayRows: any[] = [];
tableHeader: any;
tableRows: any[] = [];

//Splitting the array at new line
this.tableArray =  this.detailsArray.split(/\r?\n/);
//Table header row
this.tableHeader = this.tableArray[0].split(',');
//Table body row
for(var i = 1; i < this.tableArray.length; i ++){
   this.tableArrayRows.push(this.tableArray[i]);
   this.tableRows =  this.tableArrayRows.split(',');
}

<table class="table table-striped table-bordered">
  <thead>
      <tr> 
         <th *ngFor="let tableHeaders of tableHeader">{{tableHeaders}}</th>
      </tr>
   </thead>
   <tbody>
    <tr> 
      <td *ngFor="let tableRows of tableRows">{{ tableRows }}</td>
    </tr>
     </tbody>
    </table>

Janardhan Burle · Accepted Answer · 2020-09-08 13:31:27Z

1

See the expected output Here

in component,

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent implements OnInit {
  tableArray: any;
  tableArrayRows: any[] = [];
  tableHeader: any;
  tableRows: any[] = [];
  detailsArray :any= `"ID,NAME,NUMBER,DESCRIPTION"
  "123,"PHILIP",0123456789,"OFFICE ADDRESS"
  "456,"SARA",30345004698,"OFFICE SPACE""`;

  ngOnInit() {

    // Splitting the array at new line
    this.detailsArray = this.detailsArray.replaceAll('"','');
    this.tableArray = this.detailsArray.split(/\r?\n/);
    // Table header row
    this.tableHeader = this.tableArray[0].split(',');
    // Table body row
    this.tableRows = this.tableArray.splice(1, this.tableArray.length);
    this.tableRows = this.tableRows.map(x => x.split(','));
  }
}

In HTML ,

<table class="table table-striped table-bordered">
    <thead>
        <tr>
            <th *ngFor="let tableHeaders of tableHeader">{{tableHeaders}}</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let tableRow of tableRows">
            <td *ngFor="let item of tableRow">{{ item }}</td>
        </tr>
    </tbody>
</table>

answered Sep 8, 2020 at 13:31

Janardhan Burle

1,4571 gold badge6 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sarasm Over a year ago

Thanks Janardhan. But the array structure is different in my case. Can you please check the array structure in my post?

sarasm Over a year ago

I made the below changes and its working fine.<tr *ngFor="let item of tableRows; let i = index"> <td *ngFor="let cell of item"> {{ cell }} </td> </tr>

Xavis · Accepted Answer · 2020-09-08 13:00:15Z

0

I think the problem is that in

this.tableRows = this.tableArrayRows.split(',');

You are missing the tableArrayRows array position to split. If that's the problem something like:

this.tableRows = this.tableArrayRows[this.tableArrayRows.length - 1].split(',');

Should fix it.

answered Sep 8, 2020 at 13:00

Xavis

1092 silver badges9 bronze badges

1 Comment

sarasm Over a year ago

No its not fixed the problem .I am getting empty rows after changing the code.

Collectives™ on Stack Overflow

Multiple array rows split in to table header and table rows in Angular

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related