Store an object in JSON to output in NgxData-Table

Question

I'm using Ionic 4 and I want display a table based on the calculations from my inputs

I have found a way to fetch data from a local JSON file but the issue here is I want to display data on a table based from calculated inputs rather than manual objects in JSON.

This is the HTML file, I used ngx-datatable

<ngx-datatable
        class="material"
        [rows]="rows"
        [columnMode]="'force'"
        [headerHeight]="50"
        [footerHeight]="50"
        [rowHeight]="'auto'">
        <ngx-datatable-column name="Month">
          <ng-template let-column="column" ngx-datatable-header-template>
            {{column.name}}
          </ng-template>
          <ng-template let-value="value" ngx-datatable-cell-template>
            <strong>{{value}}</strong>
          </ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column name="Interest">
        <ng-template let-column="column" let-sort="sortFn" ngx-datatable-header-template>
            <span (click)="sort()">{{column.name}}</span>
          </ng-template>
          <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
            <i>{{value}}</i>
          </ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column name="Principal">
          <ng-template let-value="value" ngx-datatable-cell-template>
            <strong>{{value}}</strong>
          </ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column name="Total">
          <ng-template let-column="column" ngx-datatable-header-template>
            {{column.name}}
          </ng-template>
          <ng-template let-value="value" ngx-datatable-cell-template>
            <strong>{{value}}</strong>
          </ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column name="Balance">
          <ng-template let-column="column" ngx-datatable-header-template>
            {{column.name}}
          </ng-template>
          <ng-template let-value="value" ngx-datatable-cell-template>
            <strong>{{value}}</strong>
          </ng-template>
        </ngx-datatable-column>
      </ngx-datatable>

This is from the TS File

this.fetch((data) => {
      this.rows = data.splice(0, 5);
    });

fetch(cb) {
    const req = new XMLHttpRequest();
    req.open('GET', `assets/data/company.json`);

    req.onload = () => {
      cb(JSON.parse(req.response));
    };

    req.send();
  }

JSON File with mock data

[
    {
        "month": "July/2019",
        "interest": "11111",
        "principal": "22222",
        "total": "33333",
        "balance": "44444"
    },
    {
        "month": "Dec/2019",
        "interest": "55555",
        "principal": "66666",
        "total": "77777",
        "balance": "88888"
    },
    {
        "month": "Jun/2019",
        "interest": "99999",
        "principal": "121212",
        "total": "232323",
        "balance": "343434"
    }
]

I have calculated objects here:

this.displayTotal = this.monthlyPayment;
this.displayPrincipal = this.displayTotal - this.displayInterest;
this.displayBalance = this.loanAmount - this.displayPrincipal; 
this.displayInterest = (this.interestRate/this.loanTerm) * this.displayBalance;
this.displayMonth = this.displayMonth;

Is it possible to integrate those objects into the JSON file?

Shinjo · Accepted Answer · 2019-08-01T02:12:12.530

0

Yes, it should be possible.

First, you can turn the result from your input into JSON format:

/*this.displayTotal = this.monthlyPayment;
this.displayPrincipal = this.displayTotal - this.displayInterest;
this.displayBalance = this.loanAmount - this.displayPrincipal; 
this.displayInterest = (this.interestRate/this.loanTerm) * this.displayBalance;
this.displayMonth = this.displayMonth;*/
//demo mocknumber:

var displayMonth = 1000;
var displayInterest = 10;
var displayPrincipal = 100;
var displayTotal = 1000;
var displayBalance = 10000;

var json = [{
  "month": this.displayMonth,
  "interest": this.displayInterest,
  "principal": this.displayPrincipal,
  "total": this.displayTotal,
  "balance": this.displayBalance,
}];

console.log(json);

Then you can try as this answer said (with modification):

var a = document.createElement('a');
a.setAttribute('href', 'data:text/plain;charset=utf-u,' + encodeURIComponent(JSON.stringify(this.json)));
a.setAttribute('download', this.filename);
a.click()

Demo: https://stackblitz.com/edit/angular-m5wd2x?file=src/app/app.component.ts

edited Aug 01 '19 at 02:12

answered Jul 31 '19 at 07:32

Shinjo

677
6
22

Thank you so much for the answer :) Though unfortunately, fs doesn't work on Angular 6 and above anymore. Is there any other way to write on a JSON file without the use of fs? – help-ionic4-newbie Jul 31 '19 at 11:14
@help-ionic4-newbie Yes, you can see updated answer. – Shinjo Aug 01 '19 at 02:12
This worked well! Thank you. Is there a way to save it into a certain file location so I may be able to fetch and display it? I want to put it in here: fetch(cb) { const req = new XMLHttpRequest(); req.open('GET', `assets/data/company.json`); but when I try to do so, the file saves as assets_data_company.json – help-ionic4-newbie Aug 01 '19 at 06:19
@help-ionic4-newbie I don't think so. https://stackoverflow.com/a/39325997/11328122 – Shinjo Aug 01 '19 at 06:31

Store an object in JSON to output in NgxData-Table

I'm using Ionic 4 and I want display a table based on the calculations from my inputs

This is the HTML file, I used ngx-datatable

1 Answers1