DEV Community

Cover image for Using JSON in Angular
bob.ts
bob.ts

Posted on

5 1

Using JSON in Angular

Being able to import and process JSON files provides a whole host of configuration options, as well as providing a means of capturing data locally for development purposes.

When I started using this pattern, I was looking for a means to provide basic configuration (i.e. Feature Flags). The process quickly evolved into ...

  • Authorization
  • Configuration (Feature Flags)
  • Language
  • Host Names
  • Core Structures (think titles matching data keys)

But first, I needed to be able to read these files.

Importing and Reading JSON files

In the tsconfig.json file I added the "resolveJsonModule": true configuration option under the compilerOptions key:

{
  "compileOnSave": false,
  "compilerOptions": {
    ...
    "resolveJsonModule": true,
    ...
}
Enter fullscreen mode Exit fullscreen mode

Additionally, I learned that I can read a JSON file that is in the assets folder via an http.get request. This provided a whole host of options for development purposes.

Now, let's look at some code.

Authorization

Basically, I built several keys and associated information for ...

  • localhost
  • Development
  • Stage
  • Production

The JSON file looks something like this ...

{
  "localhost": {
    "issuer": "https://identity ....",
    "clientId": "..."
  },
  "application.apps.cf.np.gc ...": {
    "issuer": "https://identity ...",
    "clientId": "..."
  },
  "application-stg.apps.cf.gc ...": {
    "issuer": "https://identity ...",
    "clientId": "..."
  },
  "application-ui.apps.cf.gc ...": {
    "issuer": "https://identity ...",
    "clientId": "..."
  }
}
Enter fullscreen mode Exit fullscreen mode

Additionally, I added code to look at the base URL and determine which of these "keys" to use.

In the app-routing.module.ts, the code added looks like this ...

import authnames from '@core/constants/auth.json';

const hostnameService = new HostnameService();
const hostname = hostnameService.get(window);

if (authnames[hostname] === undefined) {
  console.error('Issue with auth.json, hostname: ', hostname);
}

const authConfig = {
  issuer: authnames[hostname].issuer,
  clientId: authnames[hostname].clientId,
  ...
};
Enter fullscreen mode Exit fullscreen mode

Configuration

Using the following in a config.json file ...

{
  "features": {
    "enableKonami": true,
    "enableTheme": true,
    ...
    "useLocalJSON": false
  }
}
Enter fullscreen mode Exit fullscreen mode

The file can then be imported like this ...

import config from '@core/constants/config.json';
Enter fullscreen mode Exit fullscreen mode

And used like this ...

if (config.features.useLocalJSON === true) {
  ...
}
Enter fullscreen mode Exit fullscreen mode

config in this sense can be included in a component, as such, to be used in HTML.

@Component({
  ...
})
export class CardFunctionalityComponent implements OnInit {
  ...
  features: any = config.features;
  ...
}
Enter fullscreen mode Exit fullscreen mode

Language

Using the following in a language.json file allows for quick switching between languages, and puts all strings in one location for easy management ...

{
  "english": {
    "config": "Configuration",
    "header": "Header",
    ...
  }
}
Enter fullscreen mode Exit fullscreen mode

The file can then be imported like this ...

import language from '@core/constants/language.json';
Enter fullscreen mode Exit fullscreen mode

And used like this ...

@Component({
  ...
})
export class CardFunctionalityComponent implements OnInit {
  ...
  selectedLanguage: string = 'english';
  language: any = language[selectedLanguage];
  ...
}
Enter fullscreen mode Exit fullscreen mode

Host Names

getURL = (key: string): string => {
  if (this.useLocalJSON) {
    return hostnames.localJSON.BASE + hostnames.localJSON[key];
  } else {
    let hostname: string = this.hostnameService.get(window);
    return hostnames.HOSTNAMES[hostname] + hostnames.ROUTES[key];
  }
};
Enter fullscreen mode Exit fullscreen mode

The hostnameService.get does something like this ...

get = (_window) => _window?.location?.hostname;
Enter fullscreen mode Exit fullscreen mode

I did this simply to make the code more testable.

Core Structures

Core structures are a but harder to define.

I use these to define things like:

  • Headers for table columns that match the expected data.
  • Order of the columns.
  • Visibility of individual columns (allowing them to be displayed or not).

Let's look at some code to see where this is going.

{
  "ORDER": [
    "selected",
    "id",
    "lastname",
    "firstname"
    ...
  ],

  "SORTING": {
    "id": "number",
    "lastname": "string",
    "firstname": "string",
    ...
  },

  "COLUMNS": [
    { "id": "selected", "name": "Selected", "isActive": false },
    { "id": "id", "name": "Event Id", "isActive": true },
    { "id": "lastname", "name": "Last", "isActive": true },
    { "id": "firstname", "name": "First", "isActive": true },
    ...
  ],

  "DEFAULT": {
    "defaultSortParams": [ "lastname", "firstname" ],
    "defaultSortDirs": [ "asc", "asc" ]
  }
}
Enter fullscreen mode Exit fullscreen mode

Now, looking at this it is clear that if we have data coming in such as ...

[
  { "selected": false, "id": "1", "lastname": "Fornal", "firstname": "Bob" },
  ...
]
Enter fullscreen mode Exit fullscreen mode

We can ...

  1. Set the order when displayed on a table
  2. Enable proper sorting of the data
  3. Display proper column names
  4. Decide whether to display the column or not
  5. Enable default sorting options

This is a lot of functionality that can be packed into a structure file.

Summary

Being able to import JSON files can make development easier, more efficient, and overall a better experience when used correctly.

Being able to import and process JSON files can make development easier, more efficient, and overall a better experience when used correctly. It provides a whole host of configuration options, as well as providing a means of capturing data locally for development purposes.

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay