Reputation: 163

Working with nested JSON object gives me console error

Working with a JSON nested object and I get an error when running in the javascript console "JSON3.html:11 Uncaught SyntaxError: Invalid or unexpected token"

I've verified the JSON via https://jsonformatter.org/json-viewer and that looks ok. The output is only the text in my h2 tag. What am I missing? Here's the code.

<!DOCTYPE html>
<html>
<body>

<h2>Testing JSON .</h2>

<p id="demo"></p>

<script>

var myJSON = '{
  "LevelOne": {
    "LevelTwo": {
      "location": {
        "campus": "SouthWest",
        "building": "Biggest",
        "floor": "1st",
        "room": "101"
      },
      "quantity": "1",
      "section": "ABC",
      "task": "abc123456zyx"
    }
  }
}';
var myObj = JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myJSON.LevelOne.LevelTwo.location;
</script>

</body>
</html>

Upvotes: 1

Answers (3)

arunsakthivel96

Reputation: 306

JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax. It is commonly used for transmitting data in web applications (e.g., sending some data from the server to the client, so it can be displayed on a web page, or vice versa).Including parsing JSON so you can access data within it, and creating JSON

Instead of using JSON data as a string you can directly add the JSON data or use the double quote.if you are storing the JSON object of object in a variable using single quote, You just > write add the JSON data string in a single line or else use the double quote.

Example

<!DOCTYPE html>
<html>
<body>

<h2>Testing JSON .</h2>

<p id="demo"></p>

<script>

var myJSON = '{"LevelOne": {"LevelTwo": {"location": { "campus": "SouthWest","building": "Biggest","floor": "1st", "room": "101"},"quantity": "1","section": "ABC","task": "abc123456zyx"}}}';
var myObj = JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj.LevelOne.LevelTwo.location;
</script>

</body>
</html>

You can get the result.!

Another Solution

Upvotes: 1

nick zoum

Reputation: 7285

String concatenation

String that are surrounding using " and ' cannot extend over multiple lines, so have to separate each line and then concatenate them. Example:

var myJSON = '{' +
  '"LevelOne": {' +
    '"LevelTwo": {' +
      '"location": {' +
        '"campus": "SouthWest",' +
        '"building": "Biggest",' +
        '"floor": "1st",' +
        '"room": "101"' +
      '},' +
      '"quantity": "1",' +
     '"section": "ABC",' +
      '"task": "abc123456zyx"' +
    '}' +
  '}' +
'}';

console.log(myJSON);

Template Literals

In ES6, template literals were added, that allow to have strings span through multiple lines, provided you use ` instead of " or '. Example:

var myJSON = `{
  "LevelOne": {
    "LevelTwo": {
      "location": {
        "campus": "SouthWest",
        "building": "Biggest",
        "floor": "1st",
        "room": "101"
      },
      "quantity": "1",
      "section": "ABC",
      "task": "abc123456zyx"
    }
  }
}`;

console.log(myJSON);

Removes the new lines from the JSON

A simple way to make the JSON 1 line tall is to do JSON.stringify(json) at the browser's console.

Use a normal JSON

You can just use the normal object notation of the JSON instead of the JSON and then if you want to you can convert it back to a string using JSON.stringify. Example:

var myJSON = {
  "LevelOne": {
    "LevelTwo": {
      "location": {
        "campus": "SouthWest",
        "building": "Biggest",
        "floor": "1st",
        "room": "101"
      },
      "quantity": "1",
      "section": "ABC",
      "task": "abc123456zyx"
    }
  }
};

console.log(JSON.stringify(myJSON));
console.log(myJSON);

Upvotes: 5

Mister Jojo

Reputation: 22320

myJSON.LevelOne.LevelTwo.location is OBJECT

var myJSON = 
    { LevelOne: 
      { LevelTwo: 
        { location: 
          { campus: "SouthWest", building: "Biggest", floor: "1st", room: "101"} 
        , quantity: "1"
        , section: "ABC"
        , task: "abc123456zyx"
        } 
      } 
    } 
    
    
console.log ( myJSON.LevelOne.LevelTwo.location )
// ===> OBJECT

Upvotes: 0