8

I am having problem in http service.

What i tried is this.http.get('http://jsonplaceholder.typicode.com/posts/1') as sample data and it works. But when I used this.http.get('src/data/employees.json') it shows me 404 (Not Found)

employees.service.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class EmployeesService {
  constructor(private http: Http) {}

  getEmployees() {
    this.http
      .get('src/employees.json')
      .map((response) => response.json())
      .subscribe((result) => console.log(result));
  }
}

app.component.ts

import { Component } from '@angular/core';
import { EmployeesService } from './employees.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  constructor(private employeesService: EmployeesService) {}

  ngOnInit() {
    this.employeesService.getEmployees();
  }
}
Improve this question
6
  • 1
    Are you using angular-cli? Commented Aug 29, 2017 at 6:17
  • yes sir i am using it Commented Aug 29, 2017 at 6:31
  • @edizonv if you are answer by Kuncevic should work Commented Aug 29, 2017 at 6:33
  • 1
    @edizonv then answer by Kuncevic will work. I will suggest to follow second approach or you can put all your json files in data folder inside assets so you are not required to modify .angular-cli.json. Commented Aug 29, 2017 at 6:37
  • yes it works :) thanks Commented Aug 29, 2017 at 6:41

5 Answers 5

Reset to default
22

If you are using angular cli you have to output your json file by setting that up in .angular-cli.json like so:

"assets": [
        "assets",
        "src/employees.json"
      ],

But I would recommend to create a folder like data inside your src folder and place all your data .json filed in to it. Then have your assets config like so:

"assets": [
        "assets",
        "data"
      ],

This way cli will alway output the whole data folder so you do not have to specify each .json file separately

In case if you changing .angular-cli.json during ng serve for your changes to take an effect you have to restart ng serve

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

9 Comments

I already created a data folder in side src folder, and I put the "data" in assets .angular-cli.json file just like what you said, but still the result is 404 not found
restart you ng serve
thanks it works and i used this this.http.get('data/employees.json')
Now you can have as much folders insidedata folder as you want without configuring each separate but if you want to create any more static folders outside data then you have to configure that same way. Also bear in mind that default angular-cli static folder called assets it is always outputs by default as it is configured in .angula-cli.json same way
alright, I understand it now thanks again to you, I will now go to next step, ill connect it to PHP & MySql :)
|
2

looks like you're trying to access a file in the "src" directory, which is never made statically available.

If you need to access that json file directly, you need to make sure it's stored in the proper directory in the webserver that it can serve directly (this is usually done by configuring the static/serve settings on the backend).

Just because a file exists in your project folder doesn't mean the webserver makes all of it available.

Improve this answer

3 Comments

Hi, thanks for the quick reply, I placed my angular project in desktop and I tried to create a json file in my localhost this.http.get('localhost/data/employees.json') and still 404 not found. XMLHttpRequest cannot load localhost/data/employees.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'localhost:4200' is therefore not allowed access. The response had HTTP status code 404.
okay, two things i want you to try here. What happens when you directly copy that link into a new tab/window? this will confirm that that's a valid path to the file. Funny enough, I was helping someone out with a similar issue. You shouldn't include the full URI when making HTTP calls to localhost (unless you properly configure your backend to handle CORS). Instead of 'localhost/data/employees.json' it should just be 'data/employees.json' (or '/data/employees.json', i always forget which one it is unfortunately)
when i directly copy the link to new window it redirects me to localhost:4200, i tried data/employees.json and /data/employees.json but no luck
2

Put Your file into yourProject/src/assets folder and Give Path like /assets/yourFilename.json

Improve this answer

Comments

0

You don´t have to navigate into your src folder. Just use this.http.get('employees.json') if the file is in your src folder or this.http.get('data/employees.json') if you have a data folder in your src folder.

This works because all the code you write in your components or services (or whereever) looks for path relative to your index.html if you omit a leading /.

Improve this answer

1 Comment

my json file is in src/data/employees.json that is why i used this.http.get('data/employees.json') but still not working
0

Your file path is probably incorrect. hence the 404 NOT FOUND.

Try editing the path using ../ or ./ or ../../ etc

Improve this answer

Comments

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.