How to access JSON object in JavaScript File

Question

I am trying to access JSON object in JavaScript file but in meantime it give me an error that Uncaught SyntaxError: Unexpected identifier. I am new to JavaScript could some please help me how to solve this problem. I will also share JSON and JS file code you may explore code there.

Main.JS

 import Lang from "./lang";

console.log(Lang["dashboard.paragraph"]);

Lang.JS

 module.exports = {
  /* 01.Dashboard */
  "dashboard.title": "Dashboard",
  "dashboard.paragraph": " Here you will put data related to Dashboard Page",
};

This is NOT a JSON object. It is a JavaScript file that exports a JavaScript object. A valid JSON file would not include module.exports — Intervalia
– Intervalia, Commented Jul 3, 2019 at 20:39

connexo · Accepted Answer · 2019-07-03 21:05:34Z

2

module.exports = {
  /* 01.Dashboard */
  "dashboard.title": "Dashboard",
  "dashboard.paragraph": " Here you will put data related to Dashboard Page" // removed trailing comma(,) from here
};

Remove ',' after last key value pair. You can use jsonlint or any other JSON linting tool to validate your JSON object. You are getting this error because of invalid JSON object.

edited Jul 3, 2019 at 21:05

connexo

57.2k15 gold badges112 silver badges149 bronze badges

answered Jul 3, 2019 at 18:38

Shubham Sharma

6236 silver badges15 bronze badges

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

5 Comments

Samri Over a year ago

Can you please make a program or do some changes in my program

Intervalia Over a year ago

Yes, the comma needs to be removed. But this is NOT a JSON object. It is a JavaScript file that exports a JavaScript object. A valid JSON file would not include module.exports.

Shubham Sharma Over a year ago

@Intervalia Samri is trying to access JSON object from a js file not a JSON file.

Intervalia Over a year ago

He may think he is, but if the file starts with module.exports then it is not a JSON file, it is a JavaScript file. If he wan't a true JSON then then he needs to remove the comments and the module.exports = .

Shubham Sharma Over a year ago

@Intervalia Yes and will also need to use .json instead of .js if he want to use real JSON.

Intervalia · Accepted Answer · 2019-07-03 20:54:33Z

You are mixing two module formats. One is ES6 modules and the other is CommonJS.

You also had a filename with the first letter capitalized Lang.js and importing ./lang in all lower case. The case should always match.

If you want to use ES6 modules then you need this:

Main.JS

import Lang from "./Lang";
console.log(Lang["dashboard.paragraph"]);

Lang.JS

export default {
  /* 01.Dashboard */
  "dashboard.title": "Dashboard",
  "dashboard.paragraph": " Here you will put data related to Dashboard Page"
};

And if you want to use Common JS then do this:

Main.JS

const Lang = require("./Lang");
console.log(Lang["dashboard.paragraph"]);

Lang.JS

module.exports = {
  /* 01.Dashboard */
  "dashboard.title": "Dashboard",
  "dashboard.paragraph": " Here you will put data related to Dashboard Page"
};

Cleiton Tortato · Accepted Answer · 2019-07-03 18:41:34Z

You can use a json notation on yor file and a XMLHttpRequest object to open it.

//Consider use this format to your file
let file = {
  /* 01.Dashboard */
  "dashboard.title": "Dashboard",
  "dashboard.paragraph": " Here you will put data related to Dashboard Page",
}

//here is the result
console.log(file);

//use XMLHttpRequest object to open from a file hosted with your app 
let fileOnLik;
var oReq = new XMLHttpRequest();
oReq.onreadystatechange = function ()
    {
        if(oReq.readyState === 4)
        {
            if(oReq.status === 200 || oReq.status == 0)
            {
                fileOnLik = oReq.responseText;
            }
        }
    }
oReq.open("get", "/folder/yourFile.json", true); //could be http://www.otherserver.com/yourFile.json
oReq.send();

console.log(fileOnLink);

Arvind sharma · Accepted Answer · 2019-07-03 18:47:36Z

0

I am not getting any error with your approach. Moreover, having dot(.) in object property name is not a good programming practice.

You could write your JSON as below -

module.exports = {
        /* 01.Dashboard */
      "dashboard" : {
                "title": "Dashboard",
                "paragraph": " Here you will put data related to Dashboard Page"
      }
}

answered Jul 3, 2019 at 18:47

Arvind sharma

524 bronze badges

1 Comment

Shubham Sharma Over a year ago

@Samri You will also need to replace Lang["dashboard.paragraph"] with Lang.dashboard.paragraph, modify your code only if you are not bounded to use dot within keys in your object.

Collectives™ on Stack Overflow

How to access JSON object in JavaScript File

4 Answers 4

5 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related