{"id":28749,"date":"2024-04-08T10:01:32","date_gmt":"2024-04-08T09:01:32","guid":{"rendered":"https:\/\/nelkodev.com\/blog\/domina-json-en-javascript-parseo-manipulacion-y-serializacion-eficaz\/"},"modified":"2024-06-03T17:42:15","modified_gmt":"2024-06-03T16:42:15","slug":"domina-json-en-javascript-parseo-manipulacion-y-serializacion-eficaz","status":"publish","type":"post","link":"https:\/\/nelkodev.com\/en\/blog\/master-json-in-javascript-parsing-manipulation-and-efficient-serialization\/","title":{"rendered":"Master JSON in JavaScript: Efficient Parsing, Manipulation and Serialization"},"content":{"rendered":"<p>JSON, short for JavaScript Object Notation, has become a key standard for transmitting data in web applications due to its simplicity and efficiency. We often work with JSON in JavaScript to consume data from APIs, configure applications, and more. This format is not only easy for humans to understand, but also easy for machines to parse. In this guide, I&#039;ll take you through the essential techniques to efficiently parse, manipulate, and serialize JSON in JavaScript.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_80 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #ffffff;color:#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #ffffff;color:#ffffff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-json-in-javascript-parsing-manipulation-and-efficient-serialization\/#%C2%BFQue_es_JSON\" >What is JSON?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-json-in-javascript-parsing-manipulation-and-efficient-serialization\/#Parseo_de_JSON_en_JavaScript\" >Parsing JSON in JavaScript<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-json-in-javascript-parsing-manipulation-and-efficient-serialization\/#Manejando_Excepciones_al_Parsear_JSON\" >Handling Exceptions when Parsing JSON<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-json-in-javascript-parsing-manipulation-and-efficient-serialization\/#Manipulacion_de_Datos_JSON\" >JSON Data Manipulation<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-json-in-javascript-parsing-manipulation-and-efficient-serialization\/#Filtrado_y_Transformacion_de_Datos_JSON\" >JSON Data Filtering and Transformation<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-json-in-javascript-parsing-manipulation-and-efficient-serialization\/#Serializacion_de_Objetos_a_Formato_JSON\" >Serialization of Objects to JSON Format<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nelkodev.com\/en\/blog\/master-json-in-javascript-parsing-manipulation-and-efficient-serialization\/#Personalizacion_de_la_Serializacion\" >Serialization Customization<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFQue_es_JSON\"><\/span>What is JSON?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>JSON is a lightweight data exchange format, easily readable by both humans and machines. It is based on a subset of the JavaScript Programming Language Standard ECMA-262 3rd Edition \u2013 December 1999. JSON is a text format that is completely language-independent but uses conventions that are familiarly used by C family programmers, including C , C++, C#, Java, JavaScript, Perl, Python among others. Because of these similarities, a program that uses JSON can be prepared to work with data easily in any modern programming language.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Parseo_de_JSON_en_JavaScript\"><\/span>Parsing JSON in JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>JSON parsing is the process of converting a JSON string into a native JavaScript object or variable. JavaScript offers a global method <code>JSON.parse()<\/code> which can transform a JSON text string into a JavaScript object. For example:<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">const jsonData = &#039;{&quot;name&quot;: &quot;John&quot;, &quot;age&quot;: 30}&#039;; const obj = JSON.parse(jsonData); console.log(obj.name); \/\/ Print: Juan<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Manejando_Excepciones_al_Parsear_JSON\"><\/span>Handling Exceptions when Parsing JSON<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>JSON parsing can fail, typically due to errors in the structure of the JSON format. To handle these errors and prevent our application from breaking, we can use blocks <code>try...catch<\/code>:<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">try { const obj = JSON.parse(jsonData); console.log(obj.name); } catch (error) { console.error(&quot;Error parsing JSON:&quot;, error); }<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Manipulacion_de_Datos_JSON\"><\/span>JSON Data Manipulation<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Once we have parsed the JSON into a JavaScript object, we can manipulate this data like any other object or array in JavaScript. Suppose we want to add a new field to the previous JSON object:<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">obj.profession = &quot;Web Developer&quot;; console.log(JSON.stringify(obj)); \/\/ Print: {&quot;name&quot;: &quot;John&quot;, &quot;age&quot;: 30, &quot;profession&quot;: &quot;Web Developer&quot;}<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Filtrado_y_Transformacion_de_Datos_JSON\"><\/span>JSON Data Filtering and Transformation<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>We often need to filter or transform data contained in JSON structures. Imagine that we have an array of JSON objects and we want to filter this array to find only those elements that meet a specific condition. We can do it using array methods like <code>filter()<\/code>:<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">const users = [ {&quot;name&quot;: &quot;Ana&quot;, &quot;age&quot;: 24}, {&quot;name&quot;: &quot;F\u00e9lix&quot;, &quot;age&quot;: 45}, {&quot;name&quot;: &quot;Luisa&quot;, &quot;age&quot;: 30 } ]; const older than 30 = users.filter(user =&gt; user.age &gt; 30); console.log(greater than 30); \/\/ Print: [{&quot;name&quot;: &quot;Felix&quot;, &quot;age&quot;: 45}]<\/code><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Serializacion_de_Objetos_a_Formato_JSON\"><\/span>Serialization of Objects to JSON Format<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Serialization is the reverse process of parsing; involves converting a JavaScript object into a JSON text string. This is achieved using <code>JSON.stringify()<\/code>. This method is extremely useful when we need to send data from a web client to a server in JSON format.<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">const obj = {name: &quot;Laura&quot;, age: 28}; const jsonString = JSON.stringify(obj); console.log(jsonString); \/\/ Print: {&quot;name&quot;: &quot;Laura&quot;, &quot;age&quot;: 28}<\/code><\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Personalizacion_de_la_Serializacion\"><\/span>Serialization Customization<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><code>JSON.stringify()<\/code> allows you to insert a &quot;replacer&quot;, which can be a function or an array, to control how and what values should be included in the generated JSON string:<\/p>\n<pre><code class=\"&quot;language-javascript&quot;\">const user = { name: &quot;Carlos&quot;, age: 32, password: &quot;123456&quot; \/\/ We do not want to include this sensitive information }; const replacer = (key, value) =&gt; { if (key === &quot;password&quot;) { return undefined; } return value; }; const result = JSON.stringify(user, replacer); console.log(result); \/\/ Print: {&quot;name&quot;: &quot;Carlos&quot;, &quot;age&quot;: 32}<\/code><\/pre>\n<p>In short, working with JSON in JavaScript is essential for modern web development. Mastering JSON parsing, manipulation, and serialization techniques will allow you to manage data efficiently and securely, essential in building robust, high-performance web applications.<\/p>\n<p>For more details on other development topics, visit my blog at <a href=\"https:\/\/nelkodev.com\/en\/\">NelkoDev<\/a> and if you have specific questions or need more personalized support, you can always contact me via <a href=\"https:\/\/nelkodev.com\/en\/contact\/\">NelkoDev Contact<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>JSON, short for JavaScript Object Notation, has become a key standard for transmitting data in web applications due to its simplicity and efficiency. We often work with JSON in JavaScript to consume data from APIs, configure applications, and more. This format is not only easy for humans to understand, but also very easy to use.<\/p>","protected":false},"author":1,"featured_media":28750,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[420,1913],"tags":[1344,205,1473,1346,185,1108,644,1925,1008,1926],"class_list":["post-28749","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-pruebas-de-backend","tag-backend","tag-blog","tag-domina","tag-eficaz","tag-javascript","tag-json","tag-manipulacion","tag-parseo","tag-pruebas","tag-serializacion"],"_links":{"self":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/28749","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/comments?post=28749"}],"version-history":[{"count":0,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/posts\/28749\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media\/28750"}],"wp:attachment":[{"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/media?parent=28749"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/categories?post=28749"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nelkodev.com\/en\/wp-json\/wp\/v2\/tags?post=28749"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}