無法在瀏覽器中顯示本地json文件中的數據

Question

我想在瀏覽器中顯示JSON數據，以便模型，提供程序，存儲和條件顯示在單獨的div中。 控制台中沒有錯誤，我不知道問題出在哪里。 鏈接更新為stackblitz，請查看一下。

Github回購

這是stackblitz的鏈接。

iphone.json

{
"model": [
    "iPhone 5",
    "iPhone 5s",
    "iPhone SE"
],
"provider": [
    "Unlocked",
    "AT&T"
],
"storage": [
    "16",
    "32"
],
"condition": [
    "Brand New",
    "Mint"
] 
}

sell.service.ts

import { Injectable } from '@angular/core';
import { Observable } from "rxjs/Observable";
import { Http, Response } from "@angular/http";
import { HttpClient} from '@angular/common/http';

import "rxjs/add/operator/map";

export interface Staticdata {
  model: Array<Model>;
  provider: Array<Provider>;
  storage: Array<Storage>;
  condition: Array<Condition>;
}

export interface Model {
  name: string;
}

export interface Provider {
  carrier: string;
 }

 export interface Storage {
   size: number;
 }

 export interface Condition {
   quality: string;
 }

 @Injectable()
 export class SellService {
  fileUrl = '../static-data/iphone.json';
  constructor(public http:HttpClient) {}

  getData(){
   return this.http.get(this.fileUrl);
   }

  }

賣方iphone.component.ts

import { Component, OnInit } from '@angular/core';
import { SellService, Staticdata } from "../shared/sell.service";
import * as data from "../static-data/iphone.json";

@Component({
  selector: 'app-sell-iphone',
  templateUrl: './sell-iphone.component.html',
  styleUrls: ['./sell-iphone.component.css'],
  providers: [ SellService ]
})
export class SellIphoneComponent implements OnInit {

  constructor(public sellService: SellService){
  }

  ngOnInit() {}

  staticData : Staticdata;
  showData(){
    return this.sellService.getData().subscribe((data: Staticdata) => this.staticData = {
      model: data.model,
      provider: data.provider,
      storage: data.storage,
      condition: data.condition
    });
    }

}

Answer 1

您的json必須像：

    {
    "model": [
        {
            "name": "iPhone 5"
        },
        {
            "name": "iPhone 5s"
        },
        {
            "name": "iPhone SE"
        }
    ],
    "provider": [
        {
            "carrier": "Unlocked"
        },
        {
            "carrier": "AT&T"
        }
    ],
    "storage": [
        {
            "size": "16"
        },
        {
            "size": "32"
        }
    ],
    "condition": [
        {
            "quality": "Brand New"
        },
        {
            "quality": "Mint"
        }
    ]
}

否則您必須轉換收到的數據。 您可以在服務中比在組件中更好地做到這一點。

getData(){
   return this.http.get(this.fileUrl).pipe(map((res:any)=>{
     return {
        model:res.model.map(m=>{return {name:m}}),
        provider:res.provider.map(p=>{return{carrier:p}}),
        storage:res.storage.map(s=>{return{size:s}}),
        condition:res.condition.map(c=>{return{quality:c}})
     }
   })
  );
}

如果您使用的是angular-cli，則必須將file.json放在文件夾“ assets”中