JSON.stringify function converts an object into a string format.
It works well for small objects. A small object means it has fewer elements or fewer nested elements. But if an object is very long and very much nested also, then it is very slow. 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 to have the next action to be performed.
So, what’s the alternative?
The alternative is: We can make an object into a string by a manual implementation.
Let’s see how I manually converted an object into a string. It is faster than the JSON.stringify method.
Let’s have the following HTML sample code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
var empObj = {"empinfo": {
"1":
{
"Name":
{
"First":"Abc",
"Middle": "",
"Last": "AbcLast"
},
"Age": 35,
"Has_Passprot": false,
"Siblings": null,
"Contact":
{
"Mobile": 9887656454,
"Landline": 127677668
}
},
"2":
{
"Name":
{
"First":"Def",
"Middle": "",
"Last": "DefLast"
},
"Age": 32,
"Has_Passprot": false,
"Siblings": [{"Name": "Sib1", "Age": 30}, {"Name": "Sib2", "Age": 32}],
"Contact":
{
"Mobile": 9887656455,
"Landline": null
}
},
"3":
{
"Name":
{
"First":"Ghi",
"Middle": "GhiMiddle",
"Last": "GhiLast"
},
"Age": 30,
"Has_Passprot": false,
"Siblings": null,
"Contact":
{
"Mobile": 9887656255,
"Landline": null
}
},
"4":
{
"Name":
{
"First":"Jkl",
"Middle": "",
"Last": "JklLast"
},
"Age": 35,
"Has_Passprot": true,
"Siblings": [{"Name": "SibA", "Age": 30}],
"Contact":
{
"Mobile": 9887651455,
"Landline": null
}
}
}
};
htmlToShow = jsonFastStringify(empObj);
$('p').html(htmlToShow);
});
function jsonFastStringify(obj) {
let objString = '';
// We get the last key of this object
const lastKey = Object.keys(obj).pop();
// We add the first curly brace
objString += '{';
for (const key in obj) {
const value = obj[key];
objString += `"${key}":`;
if (typeof value === 'object') {
if(value === null) {
objString += `${value}`;
}
else if(Array.isArray(value)) {
if(value.length > 0) {
objString += '[';
$.each(value, function(valKey, valVal) {
objString += '{';
$.each(valVal, function(key1, val1){
objString += `"${key1}":"${val1}",`;
});
objString = objString.slice(0,-1);
objString += '},';
});
objString = objString.slice(0,-1);
objString += ']';
}
else {
objString += '[]';
}
}
else {
objString += `${jsonFastStringify(value)}`;
}
}
else if (typeof value === 'string') {
htmlString = `${value}`.replaceAll("\"", "\\\"").replaceAll(/(\n)/g, "\\n").replaceAll(/(\t)/g, "\\t");
objString += '"'+htmlString+'"';
}
else if (typeof value === 'number') {
objString += `${value}`;
} else if(typeof value === 'boolean') {
objString += `${value}`;
}
// We add the comma
if (key !== lastKey) {
objString += ',';
}
} // We add the last curly brace
objString += '}';
return objString;
}
</script>
</head>
<body>
<p>Hello
</body>
</html>
In the above sample code, I have made a javascript function jsonFastStringify() which converts the empObj object into string form and produces the same result as JSON.stringify produces.
The output of the above sample code will be shown below:
{"empinfo":{"1":{"Name":{"First":"Abc","Middle":"","Last":"AbcLast"},"Age":35,"Has_Passprot":false,"Siblings":null,"Contact":{"Mobile":9887656454,"Landline":127677668}},"2":{"Name":{"First":"Def","Middle":"","Last":"DefLast"},"Age":32,"Has_Passprot":false,"Siblings":[{"Name":"Sib1","Age":"30"},{"Name":"Sib2","Age":"32"}],"Contact":{"Mobile":9887656455,"Landline":null}},"3":{"Name":{"First":"Ghi","Middle":"GhiMiddle","Last":"GhiLast"},"Age":30,"Has_Passprot":false,"Siblings":null,"Contact":{"Mobile":9887656255,"Landline":null}},"4":{"Name":{"First":"Jkl","Middle":"","Last":"JklLast"},"Age":35,"Has_Passprot":true,"Siblings":[{"Name":"SibA","Age":"30"}],"Contact":{"Mobile":9887651455,"Landline":null}}}}
In the above example, a lot of data types like Strings, Numbers, Boolean, Objects, Null Objects, and Array of Objects have been handled. You can handle other data types like Date Objects and so on as the need arises by adding your own logic.
That’s it and you are ready to use it.