Reading from a non-static JSON file in an Angular4 app

Question

I have a basic Angular web app which reads from a JSON file located on the same server as the app and parses through the JSON file in order to set certain values on objects which drive certain behavior in my app (applies css classes, etc.)

I am not able to find online and/or figure out myself how to set up the controller to read from the JSON file in a way that allows the file to be changed and Angular to dynamically reload the file once it has been changed without reloading the entire page. The JSON file is local on the server where the app is deployed, and I wanted to avoid standing up a web service just to serve a file that already exists on the same server the app is deployed.

Here is what I am doing now:

ngOnInit(): void {
    // Make the HTTP request:
    this.http.get('../assets/applicationLogs.json').subscribe(data => {
        // Read the result field from the JSON response.
        this.node_a_status= data.nodes[0].status;
        this.node_b_status= data.nodes[1].status;
        this.node_c_status= data.nodes[2].status;
    }); 
}

And here is a what my JSON file looks like:

{
    "nodes":[
        { "node":"Node A", "status":"processing", "errors":null },
        { "node":"Node B", "status":"processing", "errors":null },
        { "node":"Node C", "status":"inactive", "errors":null }
        ]
}

First, I know I will probably need to move this get logic out of ngOnInit(), but I am a little lost on how I should go about achieving the desired behavior I have described with typescript.

ThatTechGuy · Accepted Answer · 2018-02-02 06:40:35Z

You're using an http request method on the file so "Poll it"... same way you would any other http JSON service. Here's a ready made poller for you to import: https://www.npmjs.com/package/rx-polling

Best thing you can do is create a service out of it and call it in ngOnInit method and use the response the same way you've shown.

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/dom/ajax';
import 'rxjs/add/operator/map';

import polling from 'rx-polling';

// Example of an Observable which requests some JSON data
const request$ = Observable.ajax({
    url: '../assets/applicationLogs.json',
    crossDomain: true
  }).map(response => response.response || [])
  .map(response => response.slice(0, 10)); // Take only first 10 comments

polling(request$, { interval: 5000 }).subscribe((comments) => {
  console.log(comments);
}, (error) => {
  // The Observable will throw if it's not able to recover after N attempts
  // By default it will attempts 9 times with exponential delay between each other.
  console.error(error);
});

Collectives™ on Stack Overflow

Reading from a non-static JSON file in an Angular4 app

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related