In a real world scenario JSON data is received as HTTPRequest from a web server, this data has to be converted into JavaScript Object in order to be displayed on a web page.
JavaScript eval() function is used to convert JSON text into JSON Object.
The JavaScript Compiler parses JSON text to JavaScript object.
Note that the text must be surrounded by braces to avoid errors.
Nested JSON Object :<html>
<head>
<script type="text/javascript">
function jsonEvalEx() {
//JSON Text
var mySongs = '{"songs":[' +
'{"songName":"Imagine","songArtist":"John Lennon" },' +
'{"songName":"Voodoo Child","songArtist":"Jimi Hendrix" },' +
'{"songName":"Kashmir","songArtist":"Led Zeppelin" }]}';
var javaScriptObj = eval ("(" + mySongs + ")");
var data = "";
data = data + "Song : " + javaScriptObj.songs[0].songName + "<br>";
data = data + "Artist : " + javaScriptObj.songs[0].songArtist + "<br><br>";
data = data + "Song : " + javaScriptObj.songs[1].songName + "<br>";
data = data + "Artist : " + javaScriptObj.songs[1].songArtist + "<br><br>";
data = data + "Song : " + javaScriptObj.songs[2].songName + "<br>";
data = data + "Artist : " + javaScriptObj.songs[2].songArtist + "<br><br>";
document.getElementById("mySongs").innerHTML = data;
}
</script>
</head>
<body onload="jsonEvalEx();">
<div id="mySongs"></div>
</body>
</html>
Output:
Song : Imagine
Artist : John Lennon
Song : Voodoo Child
Artist : Jimi Hendrix
Song : Kashmir
Artist : Led Zeppelin
- JSON Text to JavaScript Object using eval() Example: JSON Tutorial
- JSON Tutorial: List of Lessons
- JSON Schema and Hyper-Schema : JSON Tutorial
- JSON with PHP Example: JSON Tutorial
- JSON Nest Objects Example: JSON Tutorial
- JSON Schema Validator Libraries: JSON Tutorial
- JSON Syntax : JSON Tutorial
- JSON Datatypes : Tutorial
- eclipse maven m2e : Cannot complete the install - Eclipse
- How to remove or unstage a file from git staged area - Git
- SharePoint excel error - A problem occurred while connecting to the server. If the problem continues, contact your administrator. - SharePoint
- Android : How to make TextView Scrollable - Android
- Java Decompiler Eclipse Plugin - Eclipse
- Spotlight Search file path location on Mac OS X Mavericks or Yosemite - Mac-OS-X
- How to display directory tree in Mac Terminal - MacOS
- Release Date and iPhone Devices that will Support iOS 16 - iOS