In this lesson you can learn how to convert JSON string to a JavaScript object, and to convert JavaScript objects into a JSON string that can be transfered to different aplications.


Convert JSON string to JavaScript object

One of the most common use of JSON is to fetch JSON data from a web server, as a string that can be converted to JavaScript object to be used in web page.
To convert a JSON string to a JavaScript object, you can use the JSON.parse() method.
var obj = JSON.parse(json_string);

In the following example, the "jsnstr" variable contains a string with a JSON object (The string can be fetched with Ajax, for example from a PHP script, or from a file on server).
- Values from the JSON string are added in HTML elements in webpage.
Web site: <span id='wurl'></span><br>
Title: <span id='wtitle'></span>

<script>
// example of what is received from server
var jsnstr ='{"url": "https://coursesweb.net/", "title": "Web Development Courses", "users": 1500}';

// parse the 'jsnstr', and store the JSON object in 'obj'
var obj = JSON.parse(jsnstr);

// uses the JavaScript object, adds the values from 'url', and 'title' in web page
document.getElementById('wurl').innerHTML = obj.url;
document.getElementById('wtitle').innerHTML = obj.title;
</script>

JSON.parse() can be used to parse JSON strings that contains only values which are objects or arrays (with numeric and string type data), if the object contains complex data (methods, functions), the JSON.parse() will return "unexpected keyword" error. In this case, if you are sure that date are safe, use eval().


Convert JavaScript object to JSON string

To convert JavaScript object to JSON string you can use the JSON.stringify() method.
var str = JSON.stringify(object);

This is necessary especially in Ajax applications, when you want to transfer data from JavaScript to a script on server.
- In the next example it is created a JavaScript object containing an array, and another object. We use the JSON.stringify() method to convert the object into a JSON string, then, to show the results, the string is displayed in a <div> in webpage.
JSON string:
<div id='showjson'></div>

<script>
// object with an arrays and an object
var obj = {
 'courses': ['html', 'php', 'ajax'],
 'site': {'url': 'https://coursesweb.net/', 'title': 'Web Development Courses', 'users': 1500}
}

// converts the 'obj' into a JSON string
var jsonstr = JSON.stringify(obj);

// displays the JSON text in the HTML element with id='showjson'
document.getElementById('showjson').innerHTML = jsonstr;
</script>

The JSON string can be easily converted again to an object (or associative array) in the script on server. For example, in PHP by using json_decode().

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag defines the clickable areas inside the image map?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Which CSS property defines what is done if the content in a box is too big for its defined space?
display overflow position
#id {
  overflow: auto;
}
Click on the event which is triggered when the mouse is positioned over an object.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Have Good Life");
}
Indicate the PHP variable that contains data added in URL address after the "?" character.
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
Convert JSON in JavaScript

Last accessed pages

  1. Contact page - CoursesWeb (7909)
  2. Tabs effect with CSS (8623)
  3. JavaScript Course - Free lessons (15925)
  4. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (14443)
  5. Get Duration of Audio /Video file before Upload (7280)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1829)
  2. Contact page - CoursesWeb (1758)
  3. Tabs effect with CSS (1751)
  4. Insert, Select and Update NULL value in MySQL (1031)
  5. PHP getElementById and getElementsByTagName (708)