How do you access a local JSON file with an HTTP GET request in Angular 4?

Question

I have a local JSON file that I'm trying to get access to through an HTTP GET request. I put it in my-project/src/app/assets/accounts.json and checked the JSON is good.

I perform the request from a service that is called by ngOnInit() - I have also tried without the 2nd parameter in the get

  public getFieldsFromFile() {
    const url = "assets/accounts.json";
    this.http.get(url, {responseType: "text"})
    .subscribe((data) => console.log(data));
  }

Unfortunately all I get in my console.log is this Error message

    HttpErrorResponse {headers: HttpHeaders, status: 200, statusText: "OK", url: "http://users.local/assets/accounts.json", ok: false, …}
    error: {error: SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse (<anonymous>) at XMLHttp…, text: "<!DOCTYPE html>↵<html>↵    <head>↵        <title>U…<script src="dist/js/users.js"></script>↵</html>↵"}
    headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
    message: "Http failure during parsing for http://users.local/assets/accounts.json"
    name: "HttpErrorResponse"
    ok: false
    status: 200
    statusText: "OK"
    url: "http://users.local/assets/accounts.json"

If I expand, what I see is the HTML code of the index.html:

<!DOCTYPE html>
<html>
    <head>
        <title>Users</title>
        <base href="/" />
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="dist/css/vendor.css">
        <link rel="stylesheet" href="dist/css/users.css">
    </head>
    <body>
        <mv-users id="app-users">
            Loading...
        </mv-users>
    </body>
    <script src="dist/js/vendor.js"></script>
    <script src="dist/js/users.js"></script>
</html>

I understand this might be a router issue? Which is strange because I don't have any routes redirecting to index.html:

{
  path: "users",
  component: UsersComponent,
},
{ path: "**", redirectTo: "users" },

the redirection to the index.html is because it doesn't find the json file, you must add it to the angular config file to reach it — Paulo Galdo Sandoval
– Paulo Galdo Sandoval, Commented Jan 25, 2019 at 12:28
As long as it in the assets you can easily pull from it. You can just use fetch() and receive the data you need. — Talg123
– Talg123, Commented Jan 25, 2019 at 12:31
Ive just noticed your error: message: "Http failure during parsing for users.local/assets/accounts.json" how about remove that responseType? looks like your main problem is that you try to parse none JSON string. — Talg123
– Talg123, Commented Jan 25, 2019 at 12:34

Atul · Accepted Answer · 2019-01-25 13:19:27Z

1

There might be need to send header in request and also console the response with json conversion. Check the following...

public getFieldsFromFile() {
    const url = "assets/accounts.json";
    this.http.get(url, {responseType: "text"}, {headers:'Content-Type': 'application/json'})
    .subscribe((data) => console.log(data.json()));
}

You can do the syntax corrections.

answered Jan 25, 2019 at 13:19

Atul

1631 gold badge1 silver badge7 bronze badges

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

Comments

Ben · Accepted Answer · 2019-02-01 02:42:13Z

0

I solved the problem by writing this .htaccess file in the json folder:

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} -f
RewriteRule ^(CONFIG|DATA).json$ - [NC,F,L]

and writing a simple get in my service

  constructor(private http: HttpClient) {
}

  public getSingleField(field) {
    this.http.get(`./src/app/assets/${field}.json`);
}

answered Feb 1, 2019 at 2:42

Ben

1012 silver badges10 bronze badges

Collectives™ on Stack Overflow

How do you access a local JSON file with an HTTP GET request in Angular 4?

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related