如何在Angular 2+中获取json数据

我试图显示一个列表，其中包含从本地json文件中获取的数据。以下是我的服务看起来如何。如何在Angular 2+中获取json数据

category.service.ts

import { Injectable } from '@angular/core'; 
 
import { Http, Response, Headers, RequestOptions } from '@angular/http'; 
 
import { Observable } from 'rxjs/Observable'; 
 
import 'rxjs/add/operator/catch'; 
 
import 'rxjs/add/operator/do'; 
 
import 'rxjs/add/operator/map'; 
 

 
@Injectable() 
 
export class CategoryService { 
 
    constructor(private _http: Http) { } 
 

 
    getCategories() { 
 
    return this._http.get('api/categories.json') 
 
     .map((response: Response) => response.json()) 
 
     .do(data => console.log('All; ' + JSON.stringify(data))) 
 
     .catch(this.handleError); 
 
    } 
 

 
    private handleError(error: Response) { 
 
    console.log(error); 
 
    return Observable.throw(error.json().error || 'Server error'); 
 
    } 
 
}

这里是类别菜单组件在那里我注入它的外观至今

import { Component, OnInit } from '@angular/core'; 
 
import { CategoryService } from '../category.service'; 
 

 
@Component({ 
 
    selector: 'app-category-menu', 
 
    templateUrl: './category-menu.component.html', 
 
    styleUrls: ['./category-menu.component.css'] 
 
}) 
 
export class CategoryMenuComponent implements OnInit { 
 
    errorMessage: string; 
 
    commerceName= `El baratón`; 
 
    categoryName = `Bebidas`; 
 
    categories: any = 'Not assigned yet'; 
 
    hasMenu?= true; 
 

 
    constructor(private _categoryService: CategoryService) { } 
 

 

 
    ngOnInit() { 
 
    return this._categoryService.getCategories() 
 
     .subscribe(
 
     categories => this.categories = categories, 
 
     error => this.errorMessage = error 
 
    ); 
 
    } 
 

 
}

现在，我在控制台中得到的错误是404。对于此项目，我使用CLI版本1.0和src/api/categories.json文件夹内的categories.json文件。

我在做什么错在这里？

来源

2017-04-17 Jaime Rios

你怎么张贴代码块具有上“运行代码片断”功能？ – stardiviner

您api/categories.json移到资产的文件夹，然后更改URL来

return this._http.get('/assets/api/categories.json')

来源

2017-04-17 03:45:18

这解决了它。谢谢现在我不明白为什么以前的方法不起作用。你能提供一些进一步的解释吗？ –

Angular CLI将提供资产文件夹，其中包含所有资源，但不提供像lite-server这样的所有项目内容。 –

当然，一旦应用程序有一个活的后端（对本地.json文件进行测试是个好主意），请求将发送到服务器，并且它可能不是托管Angular应用程序的服务器。如果你不确定，最好使用一个轻量级的json服务器，例如'npm：json-server'，它可以托管来自任意文件夹的.json文件，并在单独的进程中运行。它也允许读写它们。 –

如何在Angular 2+中获取json数据

回答

相关问题