关于在 angular 8 中使用外部 json 文件并转换为字符串数组

Question

我在一个使用 JExcel 网格的项目中工作，因为我们正在使用一个包含一些数据的 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?;
}

尽管使用这个我无法获取数据，它说未定义，请提供整个流程，这将很有用，在此先感谢！

Answer 1

将服务更新为

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

  }

关于在 angular 8 中使用外部 json 文件并转换为字符串数组

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

json

jexcelapi

typescript

angular