{"id":28545,"date":"2021-01-19T11:36:12","date_gmt":"2021-01-19T19:36:12","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=28545"},"modified":"2021-01-22T03:21:48","modified_gmt":"2021-01-22T11:21:48","slug":"json","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/json\/","title":{"rendered":"What is JSON?"},"content":{"rendered":"\n<p>JSON is an acronym for JavaScript Object Notation. It is a JavaScript object that organizes data in key\/value pairs. Storing data in this manner makes these objects lightweight and language independent. This means JSON can be read by most programming languages.<br><\/p>\n\n\n\n<p>JSON is commonly used to retrieve data from a server to the client side because it is&nbsp; lightweight and easily read by humans and machines. In a world of consuming APIs, JSON is flexible enough to extract only the desired data from the server to the user.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Using JSON<\/h2>\n\n\n\n<p>Using JSON is a handy way to store data passed from the server to the front end of an app. Most programming languages have methods to convert data into JSON out of the box. In a JavaScript fetch request, the data response passed from the server is converted to JSON by invoking the <code>json()<\/code> method on the request. Read more about fetch requests <a href=\"https:\/\/careerkarma.com\/blog\/javascript-get-request\/\">here.<\/a>&nbsp;<br><\/p>\n\n\n\n<p>Why would we want to convert a response to JSON anyway? A response is verbose and hard to decipher for us humans. By converting the response to JSON, we organize the data into legible key\/value pairs. This makes the data more accessible via the code we write to do something with the response data.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">JSON Examples<\/h2>\n\n\n\n<p>First, let\u2019s take a look at what a response converted into JSON might look like. We are sending a fetch request to an API that tells us how many astronauts are currently in space in the example below.<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>fetch('http:\/\/api.open-notify.org\/astros.json')\n.then(response =&gt; response.json())\n.then(data =&gt; console.log(data))<\/pre><\/div>\n\n\n\n<p>For our purposes, we will log the response we converted to JSON in our console.<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>{\n    &quot;message&quot;: &quot;success&quot;,\n    &quot;number&quot;: 7,\n    &quot;people&quot;: [\n        {\n            &quot;craft&quot;: &quot;ISS&quot;,\n            &quot;name&quot;: &quot;Sergey Ryzhikov&quot;\n        },\n        {\n            &quot;craft&quot;: &quot;ISS&quot;,\n            &quot;name&quot;: &quot;Kate Rubins&quot;\n        },\n        {\n            &quot;craft&quot;: &quot;ISS&quot;,\n            &quot;name&quot;: &quot;Sergey Kud-Sverchkov&quot;\n        },\n        {\n            &quot;craft&quot;: &quot;ISS&quot;,\n            &quot;name&quot;: &quot;Mike Hopkins&quot;\n        },\n        {\n            &quot;craft&quot;: &quot;ISS&quot;,\n            &quot;name&quot;: &quot;Victor Glover&quot;\n        },\n        {\n            &quot;craft&quot;: &quot;ISS&quot;,\n            &quot;name&quot;: &quot;Shannon Walker&quot;\n        },\n        {\n            &quot;craft&quot;: &quot;ISS&quot;,\n            &quot;name&quot;: &quot;Soichi Noguchi&quot;\n        }\n    ]\n}<\/pre><\/div>\n\n\n\n<p>We can see that inside this object are the keys of \u201cmessage\u201d, \u201cnumber\u201d, and \u201cpeople.\u201d The message key points to a value of \u201csuccess.\u201d This is a nice message letting us know the status of our request.&nbsp;<br><\/p>\n\n\n\n<p>Next, our number key points to the value 7. This is the total number of people in space. Finally, we get to our \u201cpeople\u201d key. The value of this key is an array. Inside this array are more objects with the keys \u201ccraft\u201d and \u201cname.\u201d Our values to these keys are the name of the spacecraft and astronaut on board.&nbsp;<br><\/p>\n\n\n\n<p>JSON can be nested many times over. At this stage in our fetch request, the response has been converted to JSON and now the next step is to do something with that data. From here, we could use this data to populate a row of cards for each astronaut. What to do with the data is determined by what you want your app to accomplish.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>To recap, we\u2019ve learned that JSON is an object used to store data. Commonly, that data is from a server as a response in a fetch request. We\u2019ve also learned that JavaScript comes with a <code>json()<\/code> method that will convert a response into JSON.&nbsp;<br><\/p>\n\n\n\n<p>For the front end of any application to use the data from a server, it must be in the JSON format. After we convert a response to JSON, we are free to build anything we would like around that data. To go further into the <code>json()<\/code> method in fetch requests, refer to this <a href=\"https:\/\/careerkarma.com\/blog\/javascript-fetch\/\">guide<\/a>.&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"JSON is an acronym for JavaScript Object Notation. It is a JavaScript object that organizes data in key\/value pairs. Storing data in this manner makes these objects lightweight and language independent. This means JSON can be read by most programming languages. JSON is commonly used to retrieve data from a server to the client side&hellip;","protected":false},"author":104,"featured_media":11907,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[11933],"tags":[],"class_list":{"0":"post-28545","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"JavaScript","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":"","is_guest_post":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>What is JSON? - A Complete Guide | CK<\/title>\n<meta name=\"description\" content=\"JSON is a JavaScript object organizing data from a server into key\/value pairs. Start with this guide for an introduction to JSON.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/json\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What is JSON?\" \/>\n<meta property=\"og:description\" content=\"JSON is a JavaScript object organizing data from a server into key\/value pairs. Start with this guide for an introduction to JSON.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/json\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2021-01-19T19:36:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-01-22T11:21:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/JavaScript.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"667\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Ryan Manchester\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ryan Manchester\" \/>\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:\\\/\\\/careerkarma.com\\\/blog\\\/json\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/json\\\/\"},\"author\":{\"name\":\"Ryan Manchester\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/92fd52a503f77fc058ec2d0666da9bd5\"},\"headline\":\"What is JSON?\",\"datePublished\":\"2021-01-19T19:36:12+00:00\",\"dateModified\":\"2021-01-22T11:21:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/json\\\/\"},\"wordCount\":534,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/json\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/02\\\/JavaScript.jpg\",\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/json\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/json\\\/\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/json\\\/\",\"name\":\"What is JSON? - A Complete Guide | CK\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/json\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/json\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/02\\\/JavaScript.jpg\",\"datePublished\":\"2021-01-19T19:36:12+00:00\",\"dateModified\":\"2021-01-22T11:21:48+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/92fd52a503f77fc058ec2d0666da9bd5\"},\"description\":\"JSON is a JavaScript object organizing data from a server into key\\\/value pairs. Start with this guide for an introduction to JSON.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/json\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/json\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/json\\\/#primaryimage\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/02\\\/JavaScript.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/02\\\/JavaScript.jpg\",\"width\":1000,\"height\":667},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/json\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"What is JSON?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/92fd52a503f77fc058ec2d0666da9bd5\",\"name\":\"Ryan Manchester\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/ryan-manchester-150x150.jpg\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/ryan-manchester-150x150.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/ryan-manchester-150x150.jpg\",\"caption\":\"Ryan Manchester\"},\"description\":\"Ryan is a technical writer at Career Karma, where he covers programming languages, technology, and web development. The Texas native earned his Bachelor's of Music Composition from the University of North Texas. Ryan is currently pursuing further education in web development, aiming to graduate from Flatiron School with a certification in full stack web development. Since joining the Career Karma team in November 2020, Ryan has used his expertise to cover topics like React and Ruby on Rails.\",\"sameAs\":[\"http:\\\/\\\/www.ryanmanchester.info\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/ryan-manchester-6537a630\\\/\"],\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/author\\\/ryan-manchester\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"What is JSON? - A Complete Guide | CK","description":"JSON is a JavaScript object organizing data from a server into key\/value pairs. Start with this guide for an introduction to JSON.","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:\/\/careerkarma.com\/blog\/json\/","og_locale":"en_US","og_type":"article","og_title":"What is JSON?","og_description":"JSON is a JavaScript object organizing data from a server into key\/value pairs. Start with this guide for an introduction to JSON.","og_url":"https:\/\/careerkarma.com\/blog\/json\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2021-01-19T19:36:12+00:00","article_modified_time":"2021-01-22T11:21:48+00:00","og_image":[{"width":1000,"height":667,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/JavaScript.jpg","type":"image\/jpeg"}],"author":"Ryan Manchester","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"Ryan Manchester","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/json\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/json\/"},"author":{"name":"Ryan Manchester","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/92fd52a503f77fc058ec2d0666da9bd5"},"headline":"What is JSON?","datePublished":"2021-01-19T19:36:12+00:00","dateModified":"2021-01-22T11:21:48+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/json\/"},"wordCount":534,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/json\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/JavaScript.jpg","articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/json\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/json\/","url":"https:\/\/careerkarma.com\/blog\/json\/","name":"What is JSON? - A Complete Guide | CK","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/json\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/json\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/JavaScript.jpg","datePublished":"2021-01-19T19:36:12+00:00","dateModified":"2021-01-22T11:21:48+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/92fd52a503f77fc058ec2d0666da9bd5"},"description":"JSON is a JavaScript object organizing data from a server into key\/value pairs. Start with this guide for an introduction to JSON.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/json\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/json\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/json\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/JavaScript.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/JavaScript.jpg","width":1000,"height":667},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/json\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/careerkarma.com\/blog\/javascript\/"},{"@type":"ListItem","position":3,"name":"What is JSON?"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/92fd52a503f77fc058ec2d0666da9bd5","name":"Ryan Manchester","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/12\/ryan-manchester-150x150.jpg","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/12\/ryan-manchester-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/12\/ryan-manchester-150x150.jpg","caption":"Ryan Manchester"},"description":"Ryan is a technical writer at Career Karma, where he covers programming languages, technology, and web development. The Texas native earned his Bachelor's of Music Composition from the University of North Texas. Ryan is currently pursuing further education in web development, aiming to graduate from Flatiron School with a certification in full stack web development. Since joining the Career Karma team in November 2020, Ryan has used his expertise to cover topics like React and Ruby on Rails.","sameAs":["http:\/\/www.ryanmanchester.info\/","https:\/\/www.linkedin.com\/in\/ryan-manchester-6537a630\/"],"url":"https:\/\/careerkarma.com\/blog\/author\/ryan-manchester\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/28545","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/104"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=28545"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/28545\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/11907"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=28545"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=28545"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=28545"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}