Angular 5 Service读取本地.json文件

时间：2017-11-09 16:28:01

标签： javascript json angular

我正在使用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));

  }

}

我怎样才能完成这个？

9 个答案:

答案 0 :(得分：88)

首先你需要注入HttpClient而不是HttpClientModule， 第二件事你必须删除.map((res:any) => res.json())你不再需要它，因为新的HttpClient默认会给你反应的主体，最后确保你导入{{1}在你的HttpClientModule中  ：

AppModule

将其添加到您的组件：

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

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

答案 1 :(得分：17)

您有另一种解决方案，直接导入您的json。

要编译，请在typings.d.ts文件中声明此模块

peppers[3]={4,3,2,1}

在您的代码中

peppers[4]={4,3,2,1}

答案 2 :(得分：8)

我在寻找一种真正读取本地文件而不是从Web服务器读取文件的方法时发现了这个问题，我宁愿将其称为“远程文件”。

只需致电require：

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

Angular-CLI源代码启发了我：我发现它们包含组件模板，方法是将templateUrl属性的template替换为require，并将值替换为对实际HTML的tsconfig.app.json调用资源。

如果使用AOT编译器，则必须通过调整"compilerOptions": { "types": ["node"], ... }, ... 添加节点类型定义：

\Documents\IISExpress

答案 3 :(得分：6)

对于Angular 7，我按照以下步骤直接导入json数据：

在tsconfig.app.json中：

在"resolveJsonModule": true中添加"compilerOptions"

在服务或组件中：

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

然后

private example = exampleData;

答案 4 :(得分：4)

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

有关more details，请参见本文。

答案 5 :(得分：3)

假设您在项目的 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;
    })
  }
}

方法三：使用 ES6+ import 语句在离线 Angular App 中读取本地 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";

答案 6 :(得分：0)

尝试

在您的服务中编写代码

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

答案 7 :(得分：0)

让我们创建一个JSON文件，我们将其命名为navbar.json，您可以根据需要命名它！

navbar.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并将以下代码粘贴到其中。

app.component.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>

答案 8 :(得分：0)

使用打字稿3.6.3和Angular 6，这些解决方案都不适合我。

的工作是按照教程here进行的，该教程说您需要在项目中添加一个名为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;
    . . . .
  }
相关问题
最新问题