CODEWITHSUNDEEP
jsonangular
JackU
JackU

Reputation: 1476

Importing JSON from a server within Angular

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?

Upvotes: 0

Views: 63

Answers (3)

Nidhish Krishnan
Nidhish Krishnan

Reputation: 20741

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() {}

}

Upvotes: 1

Dmitry Sobolevsky
Dmitry Sobolevsky

Reputation: 1191

Use HttpClient get method.

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

Upvotes: 1

Harijs Deksnis
Harijs Deksnis

Reputation: 1496

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)
  }

}

Upvotes: 4

Related Questions