{"id":175,"date":"2024-01-19T21:34:34","date_gmt":"2024-01-20T00:34:34","guid":{"rendered":"https:\/\/desvendandoocodigo.com.br\/?p=175"},"modified":"2024-07-18T16:14:27","modified_gmt":"2024-07-18T19:14:27","slug":"entendendo-o-json-javascript-object-notation","status":"publish","type":"post","link":"https:\/\/desvendandoocodigo.com.br\/?p=175","title":{"rendered":"Entendendo o JSON (JavaScript Object Notation)"},"content":{"rendered":"\n<p>Se voc\u00ea est\u00e1 come\u00e7ando a explorar o mundo do desenvolvimento web com JavaScript, \u00e9 prov\u00e1vel que tenha ouvido falar do JSON. Mas o que \u00e9 JSON e por que \u00e9 t\u00e3o importante para os desenvolvedores web? Neste artigo para iniciantes, vamos entender o que \u00e9 JSON e como ele \u00e9 usado no desenvolvimento web.<\/p>\n\n\n\n<p>Em JavaScript, o formato JSON (JavaScript Object Notation) \u00e9 comumente usado para trocar dados entre um servidor e um cliente, al\u00e9m de ser utilizado para armazenar e estruturar dados de maneira hier\u00e1rquica.<\/p>\n\n\n\n<p> O JSON \u00e9 uma representa\u00e7\u00e3o de dados bastante simples e leve, sendo f\u00e1cil de entender e gerar. \u00c9 um formato de dados leg\u00edvel por humanos f\u00e1cil de entender e escrever. Ele \u00e9 frequentemente usado para transmitir dados entre um servidor e um navegador da web, mas tamb\u00e9m \u00e9 usado para armazenar dados e configurar arquivos em muitos aplicativos.<\/p>\n\n\n\n<p>Aqui est\u00e3o alguns conceitos b\u00e1sicos para entender o arquivo JSON em JavaScript:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Sintaxe B\u00e1sica:<\/strong><\/h2>\n\n\n\n<ul>\n<li>Os dados em JSON s\u00e3o representados como pares chave-valor.<\/li>\n\n\n\n<li>Os pares chave-valor s\u00e3o separados por dois pontos (<code>:<\/code>).<\/li>\n\n\n\n<li>Cada par chave-valor \u00e9 separado por v\u00edrgula (<code>,<\/code>).<\/li>\n\n\n\n<li>Os objetos JSON s\u00e3o delimitados por chaves <code>{}<\/code>.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"285\" height=\"122\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/01\/image.png\" alt=\"\" class=\"wp-image-176\"\/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Tipos de Dados:<\/strong><\/h2>\n\n\n\n<ul>\n<li>JSON suporta valores de tipos de dados como strings, n\u00fameros, booleanos, arrays, objetos, e <code>null<\/code>.<\/li>\n\n\n\n<li>Strings devem ser colocadas entre aspas duplas.<\/li>\n\n\n\n<li>Aspas simples ou crase n\u00e3o funcionam no JSON.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"323\" height=\"152\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/01\/exemplo.png\" alt=\"\" class=\"wp-image-178\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/01\/exemplo.png 323w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/01\/exemplo-300x141.png 300w\" sizes=\"(max-width: 323px) 100vw, 323px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Acesso a Dados em JSON:<\/strong><\/h2>\n\n\n\n<ul>\n<li>Em JavaScript, voc\u00ea pode acessar os dados de um objeto JSON usando a nota\u00e7\u00e3o de ponto (<code>objeto.chave<\/code>) ou a nota\u00e7\u00e3o de colchetes (<code>objeto['chave']<\/code>).<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"409\" height=\"198\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/01\/Documento-JS.png\" alt=\"\" class=\"wp-image-179\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/01\/Documento-JS.png 409w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/01\/Documento-JS-300x145.png 300w\" sizes=\"(max-width: 409px) 100vw, 409px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Aninhamento de Objetos e Arrays:<\/strong><\/h3>\n\n\n\n<ul>\n<li>Objetos e arrays podem ser aninhados para representar dados mais complexos.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"409\" height=\"248\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/01\/aninhamento.png\" alt=\"\" class=\"wp-image-180\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/01\/aninhamento.png 409w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/01\/aninhamento-300x182.png 300w\" sizes=\"(max-width: 409px) 100vw, 409px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Parse e Stringify:<\/strong><\/h2>\n\n\n\n<ul>\n<li>Para converter uma string JSON em um objeto JavaScript, voc\u00ea pode usar <code>JSON.parse()<\/code>.<\/li>\n\n\n\n<li>Para converter um objeto JavaScript em uma string JSON, voc\u00ea pode usar <code>JSON.stringify()<\/code>.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"457\" height=\"591\" src=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/01\/conversao.png\" alt=\"\" class=\"wp-image-181\" style=\"width:457px;height:auto\" srcset=\"https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/01\/conversao.png 457w, https:\/\/desvendandoocodigo.com.br\/wp-content\/uploads\/2024\/01\/conversao-232x300.png 232w\" sizes=\"(max-width: 457px) 100vw, 457px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-layout-1 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<p>Estes s\u00e3o apenas conceitos b\u00e1sicos para ajudar a entender a estrutura e manipula\u00e7\u00e3o de dados em formato JSON em JavaScript.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Se voc\u00ea est\u00e1 come\u00e7ando a explorar o mundo do desenvolvimento web com JavaScript, \u00e9 prov\u00e1vel que tenha ouvido falar do JSON. Mas o que \u00e9 JSON e por que \u00e9 t\u00e3o importante para os desenvolvedores web? Neste artigo para iniciantes, vamos entender o que \u00e9 JSON e como ele \u00e9 usado no desenvolvimento web. Em JavaScript, o formato JSON (JavaScript Object Notation) \u00e9 comumente usado para trocar dados entre um servidor e um cliente, al\u00e9m de ser utilizado para armazenar e estruturar dados de maneira hier\u00e1rquica. O JSON \u00e9 uma representa\u00e7\u00e3o de dados bastante simples e leve, sendo f\u00e1cil de entender e gerar. \u00c9 um formato de dados leg\u00edvel por humanos f\u00e1cil de entender e escrever. Ele \u00e9 frequentemente usado para transmitir dados entre um servidor e um navegador da web, mas tamb\u00e9m \u00e9 usado para armazenar dados e configurar arquivos em muitos aplicativos. Aqui est\u00e3o alguns conceitos b\u00e1sicos para entender o arquivo JSON em JavaScript: Sintaxe B\u00e1sica: Tipos de Dados: Acesso a Dados em JSON: Aninhamento de Objetos e Arrays: Parse e Stringify: Estes s\u00e3o apenas conceitos b\u00e1sicos para ajudar a entender a estrutura e manipula\u00e7\u00e3o de dados em formato JSON em JavaScript.<\/p>\n","protected":false},"author":1,"featured_media":573,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/175"}],"collection":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=175"}],"version-history":[{"count":43,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/175\/revisions"}],"predecessor-version":[{"id":1169,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/175\/revisions\/1169"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/media\/573"}],"wp:attachment":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=175"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=175"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=175"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}