{"id":6578,"date":"2023-04-07T04:37:00","date_gmt":"2023-04-07T04:37:00","guid":{"rendered":"https:\/\/studysection.com\/blog\/?p=6578"},"modified":"2023-07-17T06:45:25","modified_gmt":"2023-07-17T06:45:25","slug":"json-stringify-in-javascript-is-very-slow-for-long-object","status":"publish","type":"post","link":"https:\/\/studysection.com\/blog\/json-stringify-in-javascript-is-very-slow-for-long-object\/","title":{"rendered":"JSON.stringify in Javascript is very slow for long object"},"content":{"rendered":"<p><strong><strong>JSON.stringify<\/strong><\/strong> function converts an object into a string format.<\/p>\n<p>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 <strong>JSON.stringify<\/strong> function on an object, it was taking approximately <strong>8 seconds<\/strong> 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. <strong>8 seconds or more than 8 seconds<\/strong> is too much for the user to wait for the next action.<\/p>\n<p>So, what\u2018s the solution?<br \/>\nThe 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.<br \/>\nSuppose $var is a value that we are retrieving through ajax where object information exists.<br \/>\nIn PHP, I used the function json_encode($var) to encode an object into json format.<br \/>\nBut, I faced an issue here. It stores all values as strings. Even numerals and boolean values as strings.<\/p>\n<p>First, Let\u2019s see the difference between <strong>JSON.stringify()<\/strong> in javascript and <strong>json_encode()<\/strong> in php<br \/>\nFollowing is the example of a <strong>Json <\/strong>Object in <strong>Javascript<\/strong>:<br \/>\n<code>var empObj = {<br \/>\n{<br \/>\n'Name': 'Abc',<br \/>\n'Age': 35,<br \/>\n'Has_Passprot': False<br \/>\n},<br \/>\n{<br \/>\n'Name': 'Def',<br \/>\n'Age': 25,<br \/>\n'Has_Passprot': True<br \/>\n},<br \/>\n{<br \/>\n'Name': 'Ghi',<br \/>\n'Age': 30,<br \/>\nHas_Passprot': False<br \/>\n}}<\/code><\/p>\n<p>Following is the example of Json Object in PHP:<br \/>\n<code>var empObj = {<br \/>\n{<br \/>\n'Name': 'Abc',<br \/>\n'Age': '35',<br \/>\n'Has_Passprot': 'False'<br \/>\n},<br \/>\n{<br \/>\n'Name': 'Def',<br \/>\n'Age': '25',<br \/>\n'Has_Passprot': 'True'<br \/>\n},<br \/>\n{<br \/>\n'Name': 'Ghi',<br \/>\n'Age': '30',<br \/>\n'Has_Passprot': 'False'<br \/>\n}}<\/code><\/p>\n<p>As you can see, boolean values and integer values become strings.<br \/>\nI 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.<br \/>\nTo resolve the integer issue, I used the following solution in PHP:<br \/>\n<code>$var = $_POST['empObj'];<br \/>\njson_encode($var JSON_NUMERIC_CHECK);    \/\/ Pass this extra parameter<\/code><\/p>\n<p>With the above solution, integer values will remain integers. Still, I was facing issues with Boolean values. I didn\u2019t find a solution on the server-side part. So, I resolve this on the <strong>Javascript <\/strong>part as shown below:<br \/>\nI replaced code<br \/>\n<code>if(empObj['Has_Passport'] == true) {<br \/>\n\/\/  do some action<br \/>\n}<\/code><\/p>\n<p>with the following code:<br \/>\n<code>if(empObj['Has_Passport'] == true || empObj['Has_Passport'] == 'true') {<br \/>\n\/\/  do some action<br \/>\n}<\/code><br \/>\nIn 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.<\/p>\n<p><small><em>jQuery presents a tree-like structure of all the elements on a webpage simplifying the syntax and further manipulating such elements. The <a href=\"https:\/\/www.studysection.com\/jquery-3.x-advanced\">jQuery Certification Exam<\/a> by StudySection will secure your fundamental knowledge and a basic understanding of jQuery as an asset to improve your skills.<\/em><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"<p>JSON.stringify function converts an object into a string format. In one of my projects, I used this function to make<\/p>\n","protected":false},"author":1,"featured_media":6579,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[199,645],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>JSON.stringify in Javascript is very slow for long object - SS Blog<\/title>\n<meta name=\"description\" content=\"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.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/studysection.com\/blog\/json-stringify-in-javascript-is-very-slow-for-long-object\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JSON.stringify in Javascript is very slow for long object - SS Blog\" \/>\n<meta property=\"og:description\" content=\"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.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/studysection.com\/blog\/json-stringify-in-javascript-is-very-slow-for-long-object\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Posts on famous people, innovations and educational topics\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/studysection\" \/>\n<meta property=\"article:published_time\" content=\"2023-04-07T04:37:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-17T06:45:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2023\/04\/JSON-stringify-in-Javascript1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"300\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin-studysection-blog\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@studysection\" \/>\n<meta name=\"twitter:site\" content=\"@studysection\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin-studysection-blog\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/studysection.com\/blog\/json-stringify-in-javascript-is-very-slow-for-long-object\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/json-stringify-in-javascript-is-very-slow-for-long-object\/\"},\"author\":{\"name\":\"admin-studysection-blog\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\"},\"headline\":\"JSON.stringify in Javascript is very slow for long object\",\"datePublished\":\"2023-04-07T04:37:00+00:00\",\"dateModified\":\"2023-07-17T06:45:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/studysection.com\/blog\/json-stringify-in-javascript-is-very-slow-for-long-object\/\"},\"wordCount\":491,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"keywords\":[\"JavaScript\",\"JSON\"],\"articleSection\":[\"Learn and Grow\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/studysection.com\/blog\/json-stringify-in-javascript-is-very-slow-for-long-object\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/studysection.com\/blog\/json-stringify-in-javascript-is-very-slow-for-long-object\/\",\"url\":\"https:\/\/studysection.com\/blog\/json-stringify-in-javascript-is-very-slow-for-long-object\/\",\"name\":\"JSON.stringify in Javascript is very slow for long object - SS Blog\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/#website\"},\"datePublished\":\"2023-04-07T04:37:00+00:00\",\"dateModified\":\"2023-07-17T06:45:25+00:00\",\"description\":\"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.\",\"breadcrumb\":{\"@id\":\"https:\/\/studysection.com\/blog\/json-stringify-in-javascript-is-very-slow-for-long-object\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/studysection.com\/blog\/json-stringify-in-javascript-is-very-slow-for-long-object\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/studysection.com\/blog\/json-stringify-in-javascript-is-very-slow-for-long-object\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/studysection.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JSON.stringify in Javascript is very slow for long object\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/studysection.com\/blog\/#website\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"name\":\"Blog Posts on famous people, innovations and educational topics\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/studysection.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/studysection.com\/blog\/#organization\",\"name\":\"StudySection\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"contentUrl\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"width\":920,\"height\":440,\"caption\":\"StudySection\"},\"image\":{\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/studysection\",\"https:\/\/twitter.com\/studysection\",\"https:\/\/www.instagram.com\/study.section\/\",\"https:\/\/www.linkedin.com\/company\/studysection\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\",\"name\":\"admin-studysection-blog\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"caption\":\"admin-studysection-blog\"},\"url\":\"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JSON.stringify in Javascript is very slow for long object - SS Blog","description":"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.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/studysection.com\/blog\/json-stringify-in-javascript-is-very-slow-for-long-object\/","og_locale":"en_US","og_type":"article","og_title":"JSON.stringify in Javascript is very slow for long object - SS Blog","og_description":"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.","og_url":"https:\/\/studysection.com\/blog\/json-stringify-in-javascript-is-very-slow-for-long-object\/","og_site_name":"Blog Posts on famous people, innovations and educational topics","article_publisher":"https:\/\/www.facebook.com\/studysection","article_published_time":"2023-04-07T04:37:00+00:00","article_modified_time":"2023-07-17T06:45:25+00:00","og_image":[{"width":300,"height":200,"url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2023\/04\/JSON-stringify-in-Javascript1.png","type":"image\/png"}],"author":"admin-studysection-blog","twitter_card":"summary_large_image","twitter_creator":"@studysection","twitter_site":"@studysection","twitter_misc":{"Written by":"admin-studysection-blog","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/studysection.com\/blog\/json-stringify-in-javascript-is-very-slow-for-long-object\/#article","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/json-stringify-in-javascript-is-very-slow-for-long-object\/"},"author":{"name":"admin-studysection-blog","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402"},"headline":"JSON.stringify in Javascript is very slow for long object","datePublished":"2023-04-07T04:37:00+00:00","dateModified":"2023-07-17T06:45:25+00:00","mainEntityOfPage":{"@id":"https:\/\/studysection.com\/blog\/json-stringify-in-javascript-is-very-slow-for-long-object\/"},"wordCount":491,"commentCount":0,"publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"keywords":["JavaScript","JSON"],"articleSection":["Learn and Grow"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/studysection.com\/blog\/json-stringify-in-javascript-is-very-slow-for-long-object\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/studysection.com\/blog\/json-stringify-in-javascript-is-very-slow-for-long-object\/","url":"https:\/\/studysection.com\/blog\/json-stringify-in-javascript-is-very-slow-for-long-object\/","name":"JSON.stringify in Javascript is very slow for long object - SS Blog","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/#website"},"datePublished":"2023-04-07T04:37:00+00:00","dateModified":"2023-07-17T06:45:25+00:00","description":"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.","breadcrumb":{"@id":"https:\/\/studysection.com\/blog\/json-stringify-in-javascript-is-very-slow-for-long-object\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/studysection.com\/blog\/json-stringify-in-javascript-is-very-slow-for-long-object\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/studysection.com\/blog\/json-stringify-in-javascript-is-very-slow-for-long-object\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/studysection.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JSON.stringify in Javascript is very slow for long object"}]},{"@type":"WebSite","@id":"https:\/\/studysection.com\/blog\/#website","url":"https:\/\/studysection.com\/blog\/","name":"Blog Posts on famous people, innovations and educational topics","description":"","publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/studysection.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/studysection.com\/blog\/#organization","name":"StudySection","url":"https:\/\/studysection.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","contentUrl":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","width":920,"height":440,"caption":"StudySection"},"image":{"@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/studysection","https:\/\/twitter.com\/studysection","https:\/\/www.instagram.com\/study.section\/","https:\/\/www.linkedin.com\/company\/studysection"]},{"@type":"Person","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402","name":"admin-studysection-blog","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","caption":"admin-studysection-blog"},"url":"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/"}]}},"views":447,"_links":{"self":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/6578"}],"collection":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/comments?post=6578"}],"version-history":[{"count":2,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/6578\/revisions"}],"predecessor-version":[{"id":6933,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/6578\/revisions\/6933"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media\/6579"}],"wp:attachment":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media?parent=6578"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/categories?post=6578"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/tags?post=6578"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}