Angular 5 Service 讀取本地 .json 文件

Question

我正在使用 Angular 5，並且使用 angular-cli 創建了一個服務

我想要做的是創建一個服務來讀取 Angular 5 的本地 json 文件。

這就是我所擁有的......我有點卡住了......

import { Injectable } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

@Injectable()
export class AppSettingsService {

  constructor(private http: HttpClientModule) {
    var obj;
    this.getJSON().subscribe(data => obj=data, error => console.log(error));
  }

  public getJSON(): Observable<any> {
    return this.http.get("./assets/mydata.json")
      .map((res:any) => res.json())
      .catch((error:any) => console.log(error));

  }

}

我怎樣才能完成這個？

Answer 1

首先你必須注入HttpClient而不是HttpClientModule ，第二件事你必須刪除.map((res:any) => res.json())你不再需要它，因為新的HttpClient會給你默認響應，最后確保您在AppModule導入HttpClientModule ：

import { HttpClient } from '@angular/common/http'; 
import { Observable } from 'rxjs';

@Injectable()
export class AppSettingsService {

   constructor(private http: HttpClient) {
        this.getJSON().subscribe(data => {
            console.log(data);
        });
    }

    public getJSON(): Observable<any> {
        return this.http.get("./assets/mydata.json");
    }
}

將此添加到您的組件中：

@Component({
    selector: 'mycmp',
    templateUrl: 'my.component.html',
    styleUrls: ['my.component.css']
})
export class MyComponent implements OnInit {
    constructor(
        private appSettingsService : AppSettingsService 
    ) { }

   ngOnInit(){
       this.appSettingsService.getJSON().subscribe(data => {
            console.log(data);
        });
   }
}

Answer 2

對於 Angular 7，我按照以下步驟直接導入 json 數據：

在 tsconfig.app.json 中：

在"compilerOptions"添加"resolveJsonModule": true

在服務或組件中：

import * as exampleData from '../example.json';

接着

private example = exampleData;

Answer 3

您有一個替代解決方案，直接導入您的 json。

要編譯，請在typings.d.ts 文件中聲明此模塊

declare module "*.json" {
    const value: any;
    export default value;
}

在你的代碼中

import { data_json } from '../../path_of_your.json';

console.log(data_json)

Answer 4

我在尋找一種真正讀取本地文件而不是從 Web 服務器讀取文件的方法時發現了這個問題，我寧願將其稱為“遠程文件”。

只需調用require ：

const content = require('../../path_of_your.json');

Angular-CLI 源代碼啟發了我：我發現它們包含組件模板，方法是將templateUrl屬性替換為template ，並將值替換為對實際 HTML 資源的require調用。

如果您使用 AOT 編譯器，則必須通過調整tsconfig.app.json來添加節點類型定義：

"compilerOptions": {
  "types": ["node"],
  ...
},
...

Answer 5

import data  from './data.json';
export class AppComponent  {
    json:any = data;
}

有關更多詳細信息，請參閱此文章。

Answer 6

試試這個

在您的服務中編寫代碼

import {Observable, of} from 'rxjs';

導入json文件

import Product  from "./database/product.json";

getProduct(): Observable<any> {
   return of(Product).pipe(delay(1000));
}

在組件中

get_products(){
    this.sharedService.getProduct().subscribe(res=>{
        console.log(res);
    })        
}

Answer 7

假設您在項目的 src/app 文件夾中有一個 data.json 文件，其值如下：

[
    {
        "id": 1,
        "name": "Licensed Frozen Hat",
        "description": "Incidunt et magni est ut.",
        "price": "170.00",
        "imageUrl": "https://source.unsplash.com/1600x900/?product",
        "quantity": 56840
    },
    ...
]

3 種讀取本地 JSON 文件的方法

方法一：使用 TypeScript 2.9+ import 語句讀取本地 JSON 文件

import { Component, OnInit } from '@angular/core';
import * as data from './data.json';

@Component({
  selector: 'app-root',
  template: `<ul>
      <li *ngFor="let product of products">

      </li>
  </ul>`,
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Angular Example';

  products: any = (data as any).default;

  constructor(){}
  ngOnInit(){
    console.log(data);
  }
}

方法二：使用Angular HttpClient讀取本地JSON文件

import { Component, OnInit } from '@angular/core';
import { HttpClient } from "@angular/common/http";


@Component({
  selector: 'app-root',
  template: `<ul>
      <li *ngFor="let product of products">

      </li>
  </ul>`,
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Angular Example';
  products: any = [];

  constructor(private httpClient: HttpClient){}
  ngOnInit(){
    this.httpClient.get("assets/data.json").subscribe(data =>{
      console.log(data);
      this.products = data;
    })
  }
}

方法 3：使用 ES6+ import 語句在離線 Angular 應用程序中讀取本地 JSON 文件

如果您的 Angular 應用程序離線，使用 HttpClient 讀取 JSON 文件將失敗。 在這種情況下，我們還有一種方法可以使用支持導入 JSON 文件的 ES6+ import 語句來導入本地 JSON 文件。

但首先我們需要添加一個打字文件，如下所示：

 declare module "*.json" { const value: any; export default value; }

將此添加到 src/app 文件夾中的新文件json-typings.d.ts文件中。

現在，您可以像 TypeScript 2.9+ 一樣導入 JSON 文件。

 import * as data from "data.json";

Answer 8

讓我們創建一個 JSON 文件，我們將其命名為 navbar.json 你可以隨意命名它！

導航欄.json

[
  {
    "href": "#",
    "text": "Home",
    "icon": ""
  },
  {
    "href": "#",
    "text": "Bundles",
    "icon": "",
    "children": [
      {
        "href": "#national",
        "text": "National",
        "icon": "assets/images/national.svg"
      }
    ]
  }
]

現在我們已經創建了一個包含一些菜單數據的 JSON 文件。 我們將轉到應用組件文件並粘貼以下代碼。

app.component.ts

import { Component } from '@angular/core';
import menudata from './navbar.json';

@Component({
  selector: 'lm-navbar',
  templateUrl: './navbar.component.html'
})
export class NavbarComponent {
    mainmenu:any = menudata;

}

現在，您的 Angular 7 應用程序已准備好從本地 JSON 文件提供數據。

轉到 app.component.html 並將以下代碼粘貼到其中。

應用程序組件.html

<ul class="navbar-nav ml-auto">
                  <li class="nav-item" *ngFor="let menu of mainmenu">
                  <a class="nav-link" href="{{menu.href}}">{{menu.icon}} {{menu.text}}</a>
                  <ul class="sub_menu" *ngIf="menu.children && menu.children.length > 0"> 
                            <li *ngFor="let sub_menu of menu.children"><a class="nav-link" href="{{sub_menu.href}}"><img src="{{sub_menu.icon}}" class="nav-img" /> {{sub_menu.text}}</a></li> 
                        </ul>
                  </li>
                  </ul>

Answer 9

使用 Typescript 3.6.3 和 Angular 6，這些解決方案都不適合我。

所做的工作是按照此處的教程進行操作，該教程說您需要將一個名為njson-typings.d.ts的小文件添加到您的項目中，其中包含以下內容：

declare module "*.json" {
  const value: any;
  export default value;
}

完成后，我可以簡單地導入我的硬編碼 json 數據：

import employeeData from '../../assets/employees.json';

並在我的組件中使用它：

export class FetchDataComponent implements OnInit {
  public employees: Employee[];

  constructor() {
    //  Load the data from a hardcoded .json file
    this.employees = employeeData;
    . . . .
  }