CODEWITHSUNDEEP
jsonangulartypescriptjexcelapi
Aashiq
Aashiq

Reputation: 497

Regarding using of external json file in angular 8 and convert into string array

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!

Upvotes: 0

Views: 2535

Answers (1)

Shlok Nangia
Shlok Nangia

Reputation: 2377

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
    });  

  }

Upvotes: 1

Related Questions