How can I access the json key value with help of typescript variable?

Issue

Json File

"Tamil": {
  "Name": "பெயர்",
  "Email": "மின்னஞ்சல்",
  "Phoneno": "தொலைபேசி எண்",
  "Password": "கடவுச்சொல்",
  "CPassword": "கடவுச்சொல்லை உறுதிப்படுத்தவும்",
  "Register": "பதிவு",
  "Cancel": "ரத்துசெய்"

},

Ts File

import {Component, OnInit} from '@angular/core';
import * as data from '../home/lang.json';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {
  public language;
  public value;

  constructor() {
    this.value = 'Tamil';
    this.language = data[this.value].Name;
    alert(this.language);
  }

  ngOnInit() {

  }
}

Output

ERROR Error: "Uncaught (in promise): TypeError: _home_lang_json__WEBPACK_IMPORTED_MODULE_2___namespace[this.value] is undefined
HomePage@http://localhost:8100/home-home-module.js:128:9
HomePage_Factory@ng:///HomePage/ɵfac.js:5:10

But When I try this possibility is working fine:

this.language = data["Tamil"].Name;

But while trying this

this.language = data[this.value].Name; It's Showing that error.

Solution

The only mistake you are doing is accessing Malayalam which does not exist in your JSON file, add Malayalam and it will work fine.

Some code fine tune I am doing which might help.

replace

import * as data from '../home/lang.json'

to coz TypeScript > 2.9 has a simplest way to do that

import data from '../home/lang.json

JSON File

{
  "Tamil": {  
    "Name":       "பெயர்",   
    "Email":      "மின்னஞ்சல்",   
    "Phoneno":    "தொலைபேசி எண்"  ,
    "Password":     "கடவுச்சொல்",
    "CPassword": "கடவுச்சொல்லை உறுதிப்படுத்தவும்",
    "Register":"பதிவு",
    "Cancel" :  "ரத்துசெய்"
},
  "Malayalam": {
    "Name":       "பெயர் m",   
    "Email":      "மின்னஞ்சல் m",   
    "Phoneno":    "தொலைபேசி எண் m"  ,
    "Password":     "கடவுச்சொல் m",
    "CPassword": "கடவுச்சொல்லை உறுதிப்படுத்தவும் m",
    "Register":"பதிவு m",
    "Cancel" :  "ரத்துசெய் m"
 }
}

Component

constructor() {
  this.value = "Malayalam";
  this.language = data[this.value].Name;
  alert(this.language)
}

Hope this works.

Answered By - Kamran Khatti