CODEWITHSUNDEEP
javascriptangulartypescript
Jobin
Jobin

Reputation: 8282

Javascript Variable Name as Json Object Name

First of all the question title doesn't make sense. Im not sure how can I ask the question in a better way.

Im facing an issue in an Angular 8.1 project. There is a josn file Im importing that in the settings Class (its a service). When the environment.ts file have a variable as app_company. the same name a json file also available. So if the client app_company matches the json file. all the config should be loaded from that file. This is what I need to achieve What I tried so far is .

import { Injectable } from '@angular/core';
import { environment } from '@env/environment';
import * as client1 from './client1.json';



@Injectable({
  providedIn: 'root'
})
export class SettingsService {

  newInstance:object;

  constructor() { }

  config(key : string){

    //  const newInstance = Object.create(window[environment.app_company].prototype);
    //  newInstance.constructor.apply(newInstance);
    //  return newInstance.key;
    //  const newInstance: any = new (<any>window)[environment.app_company];
    // console.log(Object.create(window[environment.app_company]));

     return environment.app_company.key;
  }
}

my json file will look like below

{
    "opNumberLabel" : "OP No"
}

So in the return section if I call client1.opNumberLabel

It works like my expectation , but I try to make that dynamic like environment.app_company.key it not working .

As you can see my tried are commented those are not worked so far :(.

Any hint will highly appreciated . Thanks in advance,

Upvotes: 0

Views: 283

Answers (2)

gr4viton
gr4viton

Reputation: 1514

Would you like to achieve something like that?

import { Injectable } from '@angular/core';
import * as settings from "./environment.json";

interface Settings {
  [key: string]: string
}

type Environment = {
  [key: string]: Partial<Settings>
};

@Injectable({
  providedIn: 'root'
})
export class SettingsService {

  private environment: Environment = {
    app_company: { }
  };

  constructor() {
    this.environment.app_company = settings;
    console.log(this.config("opNumberLabel")); // OP No
  }

  config(key : string){
     return this.environment.app_company[key];
  }
}

{
  "opNumberLabel" : "OP No",
  "settings1": "testSettings1",
  "settings2": "testSettings2"
}

If you would like to have app_company as a dynamic value too, then I would suggest to extend the example:

  • by creating an init function which could also accept the name of the client.
  • by passing an object to the SettingsService constructor, with InjectionToken, so you can define what is the current client you are trying to configure.

You might also want to have different environment setup for different clients, so I would suggest to create separate environment json files for each client. You could create an object which would hold every <client>.environment.json with <client> key.

After that you have an object, like that:

const clientEnvironments: Environment = {
    client1: { ... },
    client2: { ... }
};

So by having the name of your current client, you can easily select which environment you want to use.

Upvotes: 1

Jobin
Jobin

Reputation: 8282

Finally I resolved.

export class SettingsService {

  clients = { client1 , client2  };
  app_company :string;
  default_client = 'client1';

  constructor() { }

  config(label : string){

      this.app_company = environment.app_company;
      if(this.clients[this.app_company].default.hasOwnProperty(label)){
        return this.clients[this.app_company].default[label];
      }else{
        return this.clients[this.default_client].default[label];
      }


  }
}

Thanks to @Titus for the hint.

Upvotes: 1

Related Questions