how to display excel data on the screen

Question

Hi all

I have an issue as below

I am using angular 4

i wanto display the data from excel and display the same on the screen

To acheive it i have used the following code

appcomponent.ts

import { Component } from '@angular/core';
import * as XLSX from 'ts-xlsx';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'doctypeautomation';

arrayBuffer: any;
file: File;
incomingfile(event) {
this.file = event.target.files[0];
}

Upload()
{
let fReader: FileReader = new FileReader();
fReader.onload = (e) => {
this.arrayBuffer = fReader.result;
var data = new Uint8Array(this.arrayBuffer);
var arr = new Array();
var jsonData = [];
//var jsonData: string [];
for(var i = 0; i != data.length; ++i) arr[i] = String.fromCharCode(data[i]);
var bstr = arr.join("");
var workbook = XLSX.read(bstr, {type:"binary"});
var first_sheet_name = workbook.SheetNames[0];
var worksheet = workbook.Sheets[first_sheet_name];
console.log(XLSX.utils.sheet_to_json(worksheet, {raw: true}));
//jsonData.push(XLSX.utils.sheet_to_json(worksheet, {raw: true}));
this.jsonData = fReader.result;
// const obj = JSON.parse(worksheet);

}
fReader.readAsArrayBuffer(jsonData);
console.log('i am from uploads');
}
}

appcomponent.html

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h2>Here are some links to help you starts: </h2>

<input type="file" style="display: inline-block;" (change)="incomingfile($event)" placeholder="Upload file" accept=".xlsx">
<button type="button" class="btn btn-info" (click)="Upload()" >Upload</button>

<ul>
<li *ngFor="let js of jsondata">
<span>{{js.Apple}}</span>
<span>{{js.Bat}}</span>
<span>{{js.Cat}}</span>
<span>{{sree}</span>
</li>
</ul>
<router-outlet></router-outlet>

I am not able to display any thing on the screen

I am ble to see the uploadfile and Button only. Please help me in any sample code for this