unable to retrieve json data from assets folder using angular

Question

what i want : i have a config file where it contains some urls in .json file stored in asset folder now instead of loading environments.prod or .ts i want to load my json file config and basing on that i want run my application

what i did

 below is my json file    which i placed  asset folder

{
    "baseUrl": "https://jsonplaceholder.typicode.com/",
    "baseUrl2": "https://reqres.in/api/users"
}

now i created a ConfigServiceService.ts fpr storing config file

public _config: Object;

  constructor(public http:Http) { }

  getData(){
    debugger;
    return this.http.get("./assets/config.json").pipe(map(res =>  res.json()));
  }

after this i create a ServiceProviderService.ts for calling the service file

configData:any;

  constructor(public http:Http,public config:ConfigServiceService) {

   }

  jsonData(){
    debugger;
    return this.configData;
  }

  ngOnInit(){
    debugger;
    this.config.getData().subscribe(res =>{
      console.log(res);
      this.configData = res;
    });


  }

now i am calling the app.component.ts

 title = 'sample';
  constructor(public serv :ServiceProviderService){
    this.serv.jsonData();
  }

now my issue is i am not able to get the json data and if i am putting the logic which is there is ngoninit in ServiceProviderService.ts file if put it in constructor then i am getting undefined

note : here if there are more that once url then each url is distributed to various seperate service file suppose base1 url for 1 service file ans base2 url for another file how can i achieve that

I'm using angular 6 and in ts config I made modification for allowing json file — Dexter
– Dexter, Commented Mar 22, 2019 at 18:54

nircraft · Accepted Answer · 2019-03-22 18:57:28Z

1

To access the assets folder. Make sure angular.json has a reference under

architect --> build -->options to the directory where the file is stored:

 "assets": [
              "src/favicon.ico",
              "src/assets"
            ],

answered Mar 22, 2019 at 18:57

nircraft

8,5085 gold badges33 silver badges46 bronze badges

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

1 Comment

Dexter Over a year ago

Ok but with out putting in angular.json also we can consume I did once but this time I am.using service for that

Cody Gray · Accepted Answer · 2019-03-22 19:52:25Z

1

Try giving it an absolute url and it should work

Here, give this a try:

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

@Injectable()
export class ConfigService {

  constructor(private http: HttpClient) { }

  getData() {
    return this.http.get('/assets/config.json');
  }

}

Here's a Working Sample StackBlitz for your ref.

edited Mar 22, 2019 at 19:52

Cody Gray♦

246k53 gold badges512 silver badges591 bronze badges

answered Mar 22, 2019 at 19:37

SiddAjmera

39.6k7 gold badges77 silver badges113 bronze badges

1 Comment

Dexter Over a year ago

the one which u did is right and i already did that what i am trying in first readjson from config service --> settings service --> some component if i do this im getting undefined please check this url stackblitz.com/edit/read-local-json-file-5zashx

Márk · Accepted Answer · 2019-03-22 19:09:12Z

0

In Angular only components have lifecycle hooks (like ngOnInit, ngOnDestroy etc), services haven't. In services you should use their constructor instead.

answered Mar 22, 2019 at 19:09

Márk

745 bronze badges

3 Comments

nircraft Over a year ago

There is no OnInit shown in service code of OP. This is not an answer.

Márk Over a year ago

Indeed, my bad.

user776686 Over a year ago

@nircraft Actually Mark could have understood it so from the OP sentence: "...i am putting the logic which is there is ngoninit in ServiceProviderService.ts file"

Collectives™ on Stack Overflow

unable to retrieve json data from assets folder using angular

3 Answers 3

1 Comment

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related