Uncaught TypeError: Cannot read property 'tb' of undefined

Question

While am running the Application, I got the error in the declaration of constants.ts(assigning the json file data to the constant variables.) file.

I declared some data in json file like object.json.

{
 "furniture": {
     "tb": {
         "value": "table",
         "display": "Table(s)"
      },
      "ch": {
        "value": "chair",
        "display": "Chair(s)"
     }
 },
 "furnitureTypes": [
    {
     "value": "LivingRoomSofa",
     "display": "Living Room Sofa"
    },
    {
     "value": "CoffeeTable",
     "display": "Coffee Table"
    },
   {
    "value": "AccentCabinet",
    "display": "Accent Cabinet"
   }
 ],
"boardes": [
      {
       "value": null,
       "display": "--"
      },
      {
       "value": "Blockboard",
       "display": "Block board"
      },
      {
       "value": "Foamboard",
       "display": "Foam board"
      },
      {
       "value": "Fiberboard",
       "display": "Fiber board"
      }
  ]
}

next, I created one constants.ts file in I import the above json file.

import * as objData from './objects.json';

In that constants.ts file

import * as objData from './objects.json';

const obj = <any>objData;

console.log('obj---:',obj);

export const Constants = { farr : [obj.furniture.tb, obj.furniture.ch]; }

Run the project and I got the error.

Cannot read property 'tb' of undefined at Module../src/app/shared/constants.ts

This is the console log showes:

obj-- Module {default: {…}, __esModule: true, Symbol(Symbol.toStringTag): "Module"}

why it is getting Module and added default key but actually it's shows direct json object data.

what am saying that: I need like this showing json object.

json-obj----------: 
  {farr: Array(2),furnitureTypes: Array(3), boardes: Array(4), …}
   boardes: (4) [{…}, {…}, {…}, {…}]
  farr: (2) [{…}, {…}]
  furniture: {tb: {…}, ch: {…}}
  furnitureTypes: (3) [{…}, {…}, {…}]
  __proto__: Object

Here i can direct access like obj.tarr.a and obj.tripTypes[0]

But In my scenario, in console log it showing like this:

obj---: 
 Module {default: {…}, __esModule: true, Symbol(Symbol.toStringTag): 
 "Module"}
default:
   boardes: (4) [{…}, {…}, {…}, {…}]
   furniture: {tb: {…}, ch: {…}}
   furnitureTypes: (3) [{…}, {…}, {…}]
   __proto__: Object
   Symbol(Symbol.toStringTag): "Module"
   __esModule: true

Here it is showing like Module not an Object.

How can i get it as Object?

Can anyone help me out to solve the problem?

Answer 1

First, you need to create the file name with extension as .ts (example.ts) and in that example.ts file

export default {
  "furniture": {
    "tb": {
      "value": "tables",
      "display": "Table(s)"
    },
    "ch": {
      "value": "chairs",
      "display": "Chair(s)"
    }
  }
}

and you need to import this file in your component

import obj from './example';

Live Demo

it will work as your expectation