JSON.stringify function converts an object into a string format.
In one of my projects, I used this function to make an object into a string and then pass that value to server-side code through ajax and store that value in the database. I was using this function on button click. But it was very slow. If an object is short, which means has fewer elements or fewer nested elements, then it is ok to use this function. But, in my case, Object was very long and very much nested also. So, while using the JSON.stringify function on an object, it was taking approximately 8 seconds which was very irritating for any user to wait for such a long time. After the button clicks, the user waits for the required action like showing a success message or showing some modal/pop-up or redirecting to the next page for 1-2 seconds or a max of 3 seconds. 8 seconds or more than 8 seconds is too much for the user to wait for the next action.
So, what‘s the solution?
The solution is: Do not use JSON.stringify as a client-side thing and instead make it json format in server-side code and store it in the database. For now, I will show an example in PHP.
Suppose $var is a value that we are retrieving through ajax where object information exists.
In PHP, I used the function json_encode($var) to encode an object into json format.
But, I faced an issue here. It stores all values as strings. Even numerals and boolean values as strings.
First, Let’s see the difference between JSON.stringify() in javascript and json_encode() in php
Following is the example of a Json Object in Javascript:
var empObj = {
{
'Name': 'Abc',
'Age': 35,
'Has_Passprot': False
},
{
'Name': 'Def',
'Age': 25,
'Has_Passprot': True
},
{
'Name': 'Ghi',
'Age': 30,
Has_Passprot': False
}}
Following is the example of Json Object in PHP:
var empObj = {
{
'Name': 'Abc',
'Age': '35',
'Has_Passprot': 'False'
},
{
'Name': 'Def',
'Age': '25',
'Has_Passprot': 'True'
},
{
'Name': 'Ghi',
'Age': '30',
'Has_Passprot': 'False'
}}
As you can see, boolean values and integer values become strings.
I faced an issue when I retrieved this json information from the database and needed to use this data. The code on the javascript part was unable to find boolean and integer values and it was creating problems for performing their required operations.
To resolve the integer issue, I used the following solution in PHP:
$var = $_POST['empObj'];
json_encode($var JSON_NUMERIC_CHECK); // Pass this extra parameter
With the above solution, integer values will remain integers. Still, I was facing issues with Boolean values. I didn’t find a solution on the server-side part. So, I resolve this on the Javascript part as shown below:
I replaced code
if(empObj['Has_Passport'] == true) {
// do some action
}
with the following code:
if(empObj['Has_Passport'] == true || empObj['Has_Passport'] == 'true') {
// do some action
}
In this new code, I used both formats so that old data where boolean values have been stored as boolean values instead of strings should also work smoothly.
jQuery presents a tree-like structure of all the elements on a webpage simplifying the syntax and further manipulating such elements. The jQuery Certification Exam by StudySection will secure your fundamental knowledge and a basic understanding of jQuery as an asset to improve your skills.
