Angular 5 Service to read local .json file

by

First You have to inject HttpClient and Not HttpClientModule,
second thing you have to remove .map((res:any) => res.json()) you won’t need it any more because the new HttpClient will give you the body of the response by default , finally make sure that you import HttpClientModule in your AppModule
:

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

@Injectable()
export class AppSettingsService {

   constructor(private http: HttpClient) {
        this.getJSON().subscribe(data => {
            console.log(data);
        });
    }

    public getJSON(): Observable<any> {
        return this.http.get("./assets/mydata.json");
    }
}

to add this to your Component: 

@Component({
    selector: 'mycmp',
    templateUrl: 'my.component.html',
    styleUrls: ['my.component.css']
})
export class MyComponent implements OnInit {
    constructor(
        private appSettingsService : AppSettingsService 
    ) { }

   ngOnInit(){
       this.appSettingsService.getJSON().subscribe(data => {
            console.log(data);
        });
   }
}

More Related Contents:

  1. Angular 2 pipe that transforms JSON object to pretty-printed JSON
  2. Separate Angular2 TypeScript files and JavaScript files into different folders, maybe ‘dist‘
  3. Whats the difference between using a class and interface?
  4. Load JSON content from a local file with http.get() in Angular 2
  5. What is the “right” JSON date format?
  6. Download JSON object as a file from browser
  7. Using number as “index” (JSON)
  8. How to use CORS to implement JavaScript Google Places API request
  9. ES6 modules implementation, how to load a json file
  10. Deep copy an array in Angular 2 + TypeScript
  11. Angular 2 – communication of typescript functions with external js libraries
  12. jQuery JSON to string?
  13. How to escape a JSON string to have it in a URL?
  14. JSON security best practices?
  15. How can I get a list of the differences between two JavaScript object graphs?
  16. Use external javaScript library in angular application
  17. How to deterministically verify that a JSON object hasn’t been modified?
  18. Returning JSON array from a Django view to a template
  19. Change route params without reloading in Angular 2
  20. What is the difference between Observable and a Subject in rxjs?
  21. ChangeDetectionStrategy.OnPush and Observable.subscribe in Angular 2
  22. Angular 2 binding/events not working when adding template as innerHTML
  23. How to send data from HTML form to Google Spreadsheet using JavaScript?
  24. How to parse JSON easily?
  25. Angular 2 Hover event
  26. angular 2 access ng-content within component
  27. Safely parsing a JSON string with unquoted keys
  28. How to add local json file in jsfiddle?
  29. Ordered JSONObject
  30. Load static JSON file in Webpack

Leave a Comment