如何在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數據

回答

相關問題