2

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.

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

1 Answer 1

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);
}
5
  • any way to do it using http...? Nov 8, 2017 at 11:01
  • 1
    possible dupe of stackoverflow.com/questions/39406043/…
    – t3__rry
    Nov 8, 2017 at 11:07
  • 1
    Why would you use HTTP for not making an HTTP call ? It's a local file, I mean, is there any obligation you have ?
    – user4676340
    Nov 8, 2017 at 11:19
  • 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.
    – LLai
    Nov 8, 2017 at 14:19
  • 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.
    – user4676340
    Nov 8, 2017 at 14:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.