0

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!

Aashiq
  • 447
  • 1
  • 12
  • 27
  • Probably what you're looking for is [`JSON.stringify()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify). – ruth Apr 29 '20 at 12:18
  • Ofcourse,but i first want to get the JSON data from the external file saved assets folder in my json object. – Aashiq Apr 29 '20 at 12:46
  • You don't have to convert it to a promise. You could use `.pipe(take(1), map()` and convert the json to a string. – ruth Apr 29 '20 at 12:54
  • Your console log prints undefined because http.get is an asychronous call... try this: `this.jsonservice. getvaluefromjson().then(rowdata=> { this.rowdata = rowdata ; console.log("Row data:"+this.rowdata);})` – David Apr 29 '20 at 13:04
  • Ya David thanks,thats the solution,But how to convert the json to string array – Aashiq Apr 29 '20 at 13:29

1 Answers1

1

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

  }
Shlok Nangia
  • 2,355
  • 3
  • 16
  • 24