0

Actually the requirement is to generate json array object or json object from angular material table so that I can use this object and export to Excel sheet.

Below is the data.

const ELEMENT_DATA: Element[] = [
  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
  {position: 11, name: 'Sodium', weight: 22.9897, symbol: 'Na'},
  {position: 12, name: 'Magnesium', weight: 24.305, symbol: 'Mg'},
  {position: 13, name: 'Aluminum', weight: 26.9815, symbol: 'Al'},
  {position: 14, name: 'Silicon', weight: 28.0855, symbol: 'Si'},
  {position: 15, name: 'Phosphorus', weight: 30.9738, symbol: 'P'},
  {position: 16, name: 'Sulfur', weight: 32.065, symbol: 'S'},
  {position: 17, name: 'Chlorine', weight: 35.453, symbol: 'Cl'},
  {position: 18, name: 'Argon', weight: 39.948, symbol: 'Ar'},
  {position: 19, name: 'Potassium', weight: 39.0983, symbol: 'K'},
  {position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca'},
];

Below is the Material table.

<div class="example-container mat-elevation-z8">
  <mat-table #table [dataSource]="dataSource">

    <!--- Note that these columns can be defined in any order.
          The actual rendered columns are set as a property on the row definition" -->

    <!-- Position Column -->
    <ng-container matColumnDef="position">
      <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
    </ng-container>

    <!-- Weight Column -->
    <ng-container matColumnDef="weight">
      <mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
    </ng-container>

    <!-- Symbol Column -->
    <ng-container matColumnDef="symbol">
      <mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>
</div>

I want to generate json object of this material table.

Gregor Albert
  • 819
  • 1
  • 11
  • 23
Akshay Uttur
  • 75
  • 1
  • 8
  • Your JSON is your `ELEMENT_DATA` variable, not your array. –  Feb 20 '19 at 14:25
  • @trichetriche `ELEMENT_DATA` is an object. To convert an object to json you can use `JSON.stringify(object)` - [docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) – Jonas Praem Feb 20 '19 at 14:30
  • @JonasPraem actually he wants t oexport to CSV so you should use an algorithm to construct the CSV file. But my comment was more about what to translate, the data or the HTML array –  Feb 20 '19 at 14:32
  • @trichetriche you are correct but we know in **jquery.tableToJson.js** we have a method like `$('#table').tableToJson()` which gives json of html table but the same thing I want it from **Angular Material Table** instead **HTML Table** – Akshay Uttur Feb 21 '19 at 06:45
  • @AkshayUttur and I'm telling you there isn't and it's a bad practice, because material tables aren't tables. So use your data directly instead of trying to do something terrible. –  Feb 21 '19 at 07:34
  • @trichetriche ok if you think this is bad practice then i will drop my logic. Thanks for your words. :) – Akshay Uttur Feb 21 '19 at 08:47
  • @AkshayUttur I don't think it is, it is **a fact**. You can not rely on your HTML to make what you want. You already have formatted data, what you're trying to do is put it in your HTML, then get it back as JSON, then convert it to CSV (TS → HTML → JSON → CSV). My solution is converting your data directly to CSV (TS → CSV). Don't you see how flawed it is ? –  Feb 21 '19 at 08:56

1 Answers1

0

If your ultimate aim is to download excel sheet, then you can do so directly from the ELEMENT_DATA instead of doing it from material table.

ts file

const Element=[  
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
{position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
{position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
{position: 5, name: 'Boron', weight: 10.811, symbol: 'B'}
];
DownloadAsExcel()
{
const worksheet: XLSX.WorkSheet=XLSX.utils.table_to_sheet(this.table.nativeElement);
const tbltojson = (JSON.parse(JSON.stringify(worksheet)));
const workbook: XLSX.WorkbBook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');  //can use 'tbltojson' instead of 'worksheet'to download excel from a JSON object. Both work similarly
/* save to file */
XLSX.writeFile(workbook, 'YourFileName.xlsx');
}

Your downloaded excel looks like this: also import the xlsx module, so that the code doesn't show any error.

or if you need a json object then try converting the ELEMENT_DATA into a json like:

JSON.parse(JSON.stringify(Element));

the JSON will be like:

Karthik_Siddh
  • 101
  • 4