Question

我想在浏览器中显示JSON数据，以便模型，提供者，存储和条件显示在不同的div中。控制台没有错误，我无法弄清问题在哪里。链接已更新为stackblitz，请仔细查看。

Here是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放在文件夹＆＃34; assets＆＃34;

无法在浏览器

1 个答案: