im working in a project where are using a JExcel Grid,in that we are using a json file containing some data and we want to use it in one of the component and we also want to convert the json data into array of string so that we can use that data as a ROW data.
The json file,
[
{
"value":"Only laptop user"
},
{
"value":"Only Dektop user"
},
{
"value":"HVD with desktop"
},
{
"value":"HVD with laptop"
},
{
"value":"Dual assests laptop and desktop"
}
]
The TS file,
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import * as jexcel from 'jexcel';
import {FormControl} from '@angular/forms';
import {GetjsonService} from 'src/service/getjson.service';
import {User} from 'src/assets/user';
@Component({
selector: 'app-staticdata',
templateUrl: './staticdata.component.html',
styleUrls: ['./staticdata.component.css']
})
export class StaticdataComponent implements OnInit {
rowdata:any[];
constructor(private jsonservice:GetjsonService) {
// console.log( jsonservice);
}
ngOnInit(): void {
this.jsonservice. getvaluefromjson().then((rowdata) => (this.rowdata = rowdata));
console.log("Row data:"+this.rowdata);
}
ngAfterViewInit() {
jexcel(document.getElementById("spreadsheet") ,{
// url:"https://raw.githubusercontent.com/AashiqinCode/Angular-JExcel/Aashiq/src/assets/user.json",
columns: [
{ title: 'Value', type:'text',width:'300px' },
],
minDimensions: [1,],
contextMenu:function(){ return null;} ,//making the context menu as empty funciton
// columnSorting:true,
});
}
selectedasset:String;
asset = new FormControl();
assetlist: string[] = ['Number of screens', 'Processing capacity above 8 GB ram', 'WFH Option', 'All Applications Whitelisted', 'Ethernet Cable', 'Stable Broadband connection'];
// Adding a row on Grid
gridrowadd(){}
}
You can see I've used an service to get the data by calling the function,
the service,
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { User } from 'src/assets/user';
@Injectable({
providedIn: 'root'
})
export class GetjsonService {
constructor(private http: HttpClient) {
console.log("json service called");
}
getvaluefromjson(){
return this.http
.get<any>('assets/user.json')
.toPromise()
.then((res) => <User[]>res)
.then((data) => {
console.log("Data from json: "+data);
return data; });
}
}
The interface user.ts is,
export interface User{
value?;
}
Despite using this i cant get the data,it says undefined,Please it will be usefull if you give the entire flow,thanks in advance!
update service as
getvaluefromjson(){
return this.http
.get<any>('assets/user.json');
// give valid path as assets/user.json might not work
}
in component
ngOnInit(): void {
this.jsonservice.getvaluefromjson().subscribe((res: User[]) => {
this.data = res
console.log(res);
// now you can extract rows using for loop
});
}