Importing JSON from a server within Angular

Question

I am reading data from a JSON, which is one a server and it updates regularly and changes. I need to be able to read this JSON from the server so that I display the most up to date information on my web page.

Currently, the to be able to read the JSONs they are stored within the same project folder as my angular project. (This was because they were not set up on the server when I started).

This is how I currently import the JSON to be able to read it:

import jsonInfo from '../../../info.json'

I thought I would be able to change the file link to the server address, like so:

import jsonInfo from 'http://servername/folder/info.json'

But, VSCode gives me an error: Cannot find module 'http://servername/folder/info.json'

This is definitely the location of the JSON I am trying to load because when I click the link it takes me to the JSON and displays it.

My question is, how do I import the JSON into my .ts from a server so that I can keep getting the updated information from the JSON?

You need to use HttpClient

Augustin R
– Augustin R

2019-05-29 12:53:56 +00:00
Commented May 29, 2019 at 12:53 — Augustin R
– Augustin R, Commented May 29, 2019 at 12:53

Harijs Deksnis · Accepted Answer · 2019-05-29 12:57:41Z

4

JSON file on a server is just like any other web resource you would try to access (like an API endpoint, for example).

So you should use built in angular http client to access this JSON file.

For example:

import { HttpClient } from '@angular/common/http';

export class SomeService {
  constructor(private http: HttpClient) { }

  getInfo() {
    return this.http.get('http://servername/folder/info.json');
  }

}


//...

export class SomeComponent implements OnInit {

  info: any;

  constructor(private someService: SomeService) {}

  ngOnInit() {
    this.someService.getInfo().subscribe(info => this.info = info)
  }

}

answered May 29, 2019 at 12:57

Harijs Deksnis

1,5061 gold badge14 silver badges24 bronze badges

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

1 Comment

JackU Over a year ago

I have just done this, created a service and created the same as you within my project. I am getting the error ERROR TypeError: Cannot read property 'getInfo' of undefined. I would assume this would mean that either the JSON is blank or it doesn't exist but when I click on the link for the JSON, it opens the JSON and shows it is not blank. What would be causing this?

Dmitry Sobolevsky · Accepted Answer · 2019-05-29 12:58:12Z

1

Use HttpClient get method.

this.httpClient.get('http://servername/folder/info.json').subscribe(data => { 
  // your logic
})

answered May 29, 2019 at 12:58

Dmitry Sobolevsky

1,1916 silver badges12 bronze badges

Comments

Nidhish Krishnan · Accepted Answer · 2019-05-29 12:59:29Z

1

You can use HttpClient and do like as shown below

Working Demo

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {

  name = 'Angular';
  data = [];

  apiUrl = 'http://servername/folder/info.json';

  GetData() {
    this.http.get<any[]>(this.apiUrl)
      .subscribe(data => {
        this.data = data;
      });
  }

  ClearData() {
    this.data = [];
  }

  constructor(private http: HttpClient) {}
  ngOnInit() {}

}

answered May 29, 2019 at 12:59

Nidhish Krishnan

20.8k6 gold badges67 silver badges78 bronze badges

2 Comments

Nidhish Krishnan Over a year ago

if you observe the sample which I have given http is the variable which I have created for HttpClient in constructor down the file like this ` constructor(private http: HttpClient) {}. So you should use this.http.get`

JackU Over a year ago

My apologies, I did not see the constructor. I have followed this and now i get the error ERROR TypeError: Cannot read property 'get' of undefined in the console. I would assume I would get this if the JSON didn't or is blank? But it definitely does exist at the link I am using

Collectives™ on Stack Overflow

Importing JSON from a server within Angular

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related