Can't show data from local json file in browser

Question

I want to show JSON data in browser so that model, provider, storage and condition displays in separate divs. There is no error in console and i can't figure out where is the problem. Link updated for stackblitz, kindly have a look into it.

Github Repo

Here is the link for 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);
   }

  }

sell-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

your json must be like:

    {
    "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"
        }
    ]
}

Or you must transform the data you received. You can do it in the service better than in the component.

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

If you're using angular-cli, you must put your file.json in the folder "assets"