Angular HTTP get json file

Question

Im trying to get a json file using a service with angular 4

Service

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { CONFIG as APP_CONSTANTS } from '../config/config';
import 'rxjs/add/operator/map';

@Injectable()
export class SkillstreeService {

  constructor(private http: Http) { }

  public getSkills() {
    return this.http.get('data/skillstree.json')
      .map(res => {
        res.json();
      });
  }

}

Component

    import { SkillstreeService } from '../../services/skillstree.service';

  constructor(public dialog: MatDialog, private skillService: SkillstreeService) {
    this.getMageSkill();
  }

      public getMageSkill(): void {
        this.skillService.getSkills().subscribe(res => {
          console.log(res);
        });
      }

but for some reason is sending the 404 to the console, the json file is inside of src/app/data/skillstree.json any idea.

What is the full path for the request for that JSON file in the console? — Ionel Lupu
– Ionel Lupu, Commented Nov 8, 2017 at 10:43
put your json file in the assets folder of your project. then your path look like this. 'assets/data/skilllstree.json'. — Sathish Kotha
– Sathish Kotha, Commented Nov 8, 2017 at 10:44
this the path that give 404 on the console http://localhost:4200/app/data/skillstree.json — Miguel Frias
– Miguel Frias, Commented Nov 8, 2017 at 10:46
i put the json file in the assets folder but still 404 error — Miguel Frias
– Miguel Frias, Commented Nov 8, 2017 at 10:53

score 1 · Accepted Answer · 2017-11-08 10:54:07Z

1

Are you forced to use a JSON file and an HTTP call ?

If not, you can do

skillstree.ts

export const SKILLSTREE = [/* Put your JSON here */];

SkillsTreeService

import { SKILLSTREE } from 'data/skillstree.ts';
import * as SKILLSTREE_JSON from 'data/skillstree.json';

public getSkills() {
  return Observable.of(SKILLSTREE_JSON);
}

edited Nov 8, 2017 at 10:54

answered Nov 8, 2017 at 10:50

user4676340

Sign up to request clarification or add additional context in comments.

5 Comments

Miguel Frias Over a year ago

any way to do it using http...?

t3__rry Over a year ago

possible dupe of stackoverflow.com/questions/39406043/…

user4676340 Over a year ago

Why would you use HTTP for not making an HTTP call ? It's a local file, I mean, is there any obligation you have ?

LLai Over a year ago

One possible use case to make an http request to JSON, is if the JSON is a large file that is loaded on a page that doesn't always get used. The json will only get requested if the user hits that page, which may save on some resources.

user4676340 Over a year ago

Well, that's a good use case, but i still don't see the point of storing a JSON file on a page the user requests, instead of storing it in a database. My guess was that it is a mock of an endpoint, but anyways, even if this use case is true, that doesn't mean you should use HTTP, you can just make an asynchronous function ! You should keep the http service to make http calls, that's what it should be used for.

Collectives™ on Stack Overflow

Angular HTTP get json file

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related