How to read Json file and use in everywhere as service?

Question

I need to create global dictionary with translations in Angular and I want to use this dictionary in each component. I have created a custom service:

import { Injectable } from "@angular/core";
import _dictionary from "../assets/js/dictionary.json";

interface IWords {
  [key: string]: string;
}

@Injectable({
  providedIn: "root"
})
export class DictionaryService {
  private dictionary = new Map<string, IWords>();

  constructor() {
    console.log(_dictionary);
  }
}

Then I have added this to providers: @NgModule({ providers: [ DictionaryService ]});

As you can see, service uses json file with translations.

Problem is that constructor of service does not work, so I can not see message:

console.log(_dictionary);

It should not be necessary to add the DictionaryService in the providers array of @NgModule as you have 'providedIn: "root" ' in the service, it does the same thing. Not sure why you can not see your console.log though. — SnorreDan
– SnorreDan, Commented Oct 3, 2019 at 19:52
Anyway, constructor does not work, I have removed: @Injectable({ providedIn: "root" }) — POV
– POV, Commented Oct 3, 2019 at 19:59
I have figured out, it works only when I use as dependency in component — POV
– POV, Commented Oct 3, 2019 at 20:05

inorganik · Accepted Answer · 2019-12-13 20:26:57Z

2

You can import json data like this:

import * as _dictionary from "../assets/js/dictionary.json";

However you can't inject it in your constructor. You could include it your service like this:

export class DictionaryService {
  private dictionary = _dictionary;

  constructor() {}
}

Side note, for translations there are great tools out there like ngx-translate and transloco that load json files behind the scenes, and do it really well. I wrote an article explaining how to use them here.

You might need to add "resolveJsonModule": true to your compiler options in your tsconfig.json file.

edited Dec 13, 2019 at 20:26

answered Oct 3, 2019 at 20:08

inorganik

25.7k18 gold badges96 silver badges126 bronze badges

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

Comments

Charly Sosa · Accepted Answer · 2019-10-03 19:58:07Z

2

To read a JSON file you should use http get and subscribe to it

import { HttpClient } from '@angular/common/http'; 
...
this.http.get("../assets/js/dictionary.json").subscribe(data => {
   console.log(data);
});

Regards

answered Oct 3, 2019 at 19:58

Charly Sosa

5753 silver badges5 bronze badges

Collectives™ on Stack Overflow

How to read Json file and use in everywhere as service?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related