[Tut] Convert JSON String to JavaScript Object

Convert JSON String to JavaScript Object

<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2022/11/convert-json-string-to-javascript-object.jpg" width="550" height="409" title="" alt="" /></div><div><div class="modified-on" readability="7.1489361702128"> by <a href="https://phppot.com/about/">Vincy</a>. Last modified on November 10th, 2022.</div>
<p>The JSON string is a convenient format to transfer data between terminals. Almost all of the API responses you see are in JSON string format.</p>
<p>The JSON string should be parsed to read the data bundled with this string.</p>
<p>JSON.parse function is used to convert a JSON string into a JavaScript object.</p>
<h2>Quick example</h2>
<p>The below quick example has an input JSON string having properties of animals. The properties are stored in a multi-level hierarchy.</p>
<p>The JSON.parse() JS function converts this JSON string input into an object array.</p>
<pre class="prettyprint"><code class="language-javascript">const jsonString = `{ "animals": { "Lion": { "name": "Lion", "type": "Wild", "Location": { "1": { "zoo-1": "San Diego Zoo", "zoo-2": "Bronx Zoo" } } } }
}`; javaScriptObject = JSON.parse(jsonString)
console.log(javaScriptObject);
</code></pre>
<p>The above code will log the output of the converted JSON into the browser’s developer console.</p>
<p><strong>Output:</strong></p>
<pre class="prettyprint"><code>animals: Lion: Location: 1: zoo-1: "San Diego Zoo" zoo-2: "Bronx Zoo" name: "Lion" type: "Wild"
</code></pre>
<p><img loading="lazy" class="alignnone size-large wp-image-20021" src="https://phppot.com/wp-content/uploads/2022/11/json-string-to-javascript-object-550x409.jpg" alt="json string to javascript object" width="550" height="409" srcset="https://phppot.com/wp-content/uploads/2022/11/json-string-to-javascript-object-550x409.jpg 550w, https://phppot.com/wp-content/uploads/20...00x223.jpg 300w, https://phppot.com/wp-content/uploads/20...68x571.jpg 768w, https://phppot.com/wp-content/uploads/20...object.jpg 956w" sizes="(max-width: 550px) 100vw, 550px"></p>
<p>The source JSON string can be from many different resources. For example,</p>
<ol>
<li>It can be stored in the database that is to be parsed.</li>
<li>It can be a response to an API.</li>
</ol>
<p>The JSON string will contain many types of data like dates, functions and more.</p>
<p>The following examples give code to learn how to convert a JSON string that contains different types of data. In the previous article, we have seen how to <a href="https://phppot.com/javascript/javascript-object-to-json/">convert a JavaScript object to JSON</a>.</p>
<h2>How the date in the JSON string will be converted</h2>
<p>If the input JSON string contains date values, the JSON.parse() JS function results in a date string.</p>
<p>For example, the date in <code>2014-11-25</code> into <code>Tue Nov 25 2014 05:30:00 GMT+0530</code>.</p>
<p>It will be converted later into a JavaScript date object.</p>
<pre class="prettyprint"><code class="language-javascript">// JSON string with date to JavaScript object
const jsonString = '{"animal":"Lion", "birthdate":"2014-11-25", "zoo":"Bronx Zoo"}';
const jsObject = JSON.parse(jsonString);
jsObject.birthdate = new Date(jsObject.birthdate);
console.log(jsObject.birthdate);
</code></pre>
<p><strong>Output:</strong></p>
<pre class="prettyprint"><code>Tue Nov 25 2014 05:30:00 GMT+0530
</code></pre>
<h2>JSON input script with function to JavaScript object</h2>
<p>If a JSON script contains a function as its value, the below code shows how to parse the input JSON. In an earlier tutorial, we have see many <a href="https://phppot.com/php/json-handling-with-php-how-to-encode-write-parse-decode-and-convert/">functions of JSON handling using PHP</a>.</p>
<p>It applied JSON.parse as usual and get the scope of the function by using JavaScript eval(). The JavaScript object index gets the scope to access the function in the input JSON string.</p>
<p>Note: Using the JS eval() is a bad idea if you are working with sensitive data. So avoid using functions as a string inside a JS JSON input.</p>
<pre class="prettyprint"><code class="language-javascript">// JSON string with a function to JavaScript object and invoke the function
const jsonString = '{"animal":"Lion", "birthdate":"2014-11-25", "id":"function () {return 101;}"}';
const jsObject = JSON.parse(jsonString);
jsObject.id = eval("(" + jsObject.id + ")");
console.log(jsObject.id());
// also be aware that, when you pass functions in JSON it will lose the scope
</code></pre>
<h2>JSON.parse reviver to convert the date string to a JavaScript object</h2>
<p>In a previous example, we parsed the date as a string and then converted it into a Date object.</p>
<p>Instead of converting the resultant Date string into a Date object later, this program uses JSON.parse() with its reviver parameter.</p>
<p>The reviver parameter is a callback function created below to convert the input date into a Date object.</p>
<p>Using this method, the output Javascript object will include the date object as converted by the reviver method.</p>
<pre class="prettyprint"><code class="language-javascript">// JSON string with a date to JavaScript object using the reviver parameter of JSON.parse
const jsonString = '{"animal": "Lion", "birthdate": "2014-11-25", "zoo": "Bronx Zoo"}';
const jsObject = JSON.parse(jsonString, function(key, value) { if (key == "birthdate") { return new Date(value); } else { return value; }
}); jsObject.birthdate = new Date(jsObject.birthdate);
console.log(jsObject.birthdate);
</code></pre>
<p>The reviver parameter is optional while using the JSOM.parse function. The callback defined as a reviver will check each item of the input JSON string.</p>
<p> <!-- #comments --> </p>
<div class="related-articles">
<h2>Popular Articles</h2>
</p></div>
<p> <a href="https://phppot.com/javascript/json-to-javascript-object/#top" class="top">↑ Back to Top</a> </p>
</div>


https://www.sickgaming.net/blog/2022/11/...pt-object/