Что касается использования внешнего json файла в angular 8 и преобразования в строковый массив - PullRequest
Новая
       53

Что касается использования внешнего json файла в angular 8 и преобразования в строковый массив

0 голосов
/ 29 апреля 2020

я работаю в проекте, где используется GExcel Grid, в котором мы используем файл json, содержащий некоторые данные, и мы хотим использовать его в одном из компонентов, а также хотим преобразовать данные json в массив строк, чтобы мы могли использовать эти данные в качестве данных ROW.

Файл json, 

[
    {

        "value":"Only laptop user"
    },
    {

        "value":"Only Dektop user"
    },
    {

            "value":"HVD with desktop"
    },
    {

        "value":"HVD with laptop"
    },
    {

        "value":"Dual assests laptop and desktop"
    }
]

Файл TS, 

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(){}

}

Вы можете увидеть, что я использовал службу для получения данных, вызвав функцию,

службу, 

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

}
}

Интерфейс user.ts: 

export interface User{

    value?;
}

Несмотря на то, что я не могу получить данные, они говорят, что не определено. Пожалуйста, будет полезно, если вы предоставите весь поток, заранее спасибо!

1 Ответ

0 голосов
/ 29 апреля 2020

служба обновления как 

getvaluefromjson(){
    return this.http
    .get<any>('assets/user.json'); 
    // give valid path as assets/user.json might not work

}

в компоненте 

ngOnInit(): void {
    this.jsonservice.getvaluefromjson().subscribe((res: User[]) => {
    this.data = res
    console.log(res);
    // now you can extract rows using for loop
    });  

  }
...