Read JSON file from file in Angular

Question

I have a JSON file config.json saved in the src/app/config directory.

[
  "caseSensitive",
  "matchKeywords",
  "items"
]

I have to read the file and get the content of the JSON file without parsing it.

After searching for it, I got two ways

Add "resolveJsonModule": true to the tsconfig.json file
Declara a typing module declare module "*.json" {}

and importing JSON as

import * as data from './app/config/config.json';


export class SchemaService {

  constructor() { }

  getConfig() {
    console.log('bool: ', data);                         // Output in screenshot
    console.log('type: ', typeof BooleanData);           // object
    console.log('parsed: ', JSON.stringify(BooleanData));
  }
}

But both the ways are giving the parsed output as

The JSON.stringify(BooleanData) statement is not giving the actual JSON file, instead, the array items are changed to key-value where the index is represented as key

{
  "0":"caseSensitive",
  "1":"matchKeywords",
  "2":"items"
}

How can I read the raw JSON (without parsing) in Angular, or at least convert an object into JSON?

Does this answer your question? Angular 5 Service to read local .json file — R. Richards
– R. Richards, Commented Aug 27, 2021 at 18:28
@R.Richards this does not actually answer my question. Using HttpClient will stop working when there is no connection, also it requires putting the data file in the assets directory, whereas in my case, it is there in its module directory. — Anuj TBE
– Anuj TBE, Commented Aug 27, 2021 at 18:32
Looks like a jsonModule is expected to always be an object. You can try { data: [ "caseSensitive", "matchKeywords", "items" ]} and then do the import as import { data } from './app/config/config.json'; — MikeOne
– MikeOne, Commented Aug 27, 2021 at 18:54

Jp Vinjamoori · Accepted Answer · 2021-08-27 19:16:16Z

2

You can use a quickfix provide by @amer-yousuf But it will also let you import any .js file into your codebase as well. I wont prefer that. Here is an alternative approach

Define your config.json.ts (notice it ends with .ts and not .json) something like below

export const CONFIG = { // your JSON is assigned to CONFIG variable
    "say": "hello world"
}

In your other .ts file where you want to use, use something like following code

import { CONFIG } from './config.json';

// ...

console.log(CONFIG.say);

// ...

Benefit of this method:

You can still use tslint/eslint on config.json.ts
Most editors will auto-complete for you

answered Aug 27, 2021 at 19:16

Jp Vinjamoori

1,2716 silver badges17 bronze badges

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

Comments

Amer · Accepted Answer · 2021-08-27 18:54:44Z

2

In Angular, to access the JSON as an object, you need to add the following two options to the tsconfig.json file:

"resolveJsonModule": true,
"allowSyntheticDefaultImports": true,

Then you can import it within your service like the following:

import data from './app/config/config.json';

answered Aug 27, 2021 at 18:54

Amer

6,7442 gold badges11 silver badges36 bronze badges

Comments

Klodian · Accepted Answer · 2021-08-27 19:57:47Z

2

To access JSON as Module in Angular you should add these two lines into tsconfig.json file

"resolveJsonModule": true,
"allowSyntheticDefaultImports": true

Then you can import it anywhere you want within the app

import  *  as  Characters  from  './configs/characters.json';

Finaly access the object from module

export class CharactersComponent {
    public characters: CharacterModel[] = (Characters as any).default;
}

answered Aug 27, 2021 at 19:57

Klodian

7116 silver badges18 bronze badges

Collectives™ on Stack Overflow

Read JSON file from file in Angular

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related