{"id":440,"date":"2022-02-05T10:58:19","date_gmt":"2022-02-05T10:58:19","guid":{"rendered":"http:\/\/codebitshub.com\/?p=440"},"modified":"2022-02-05T20:54:59","modified_gmt":"2022-02-05T20:54:59","slug":"reading-json-file-in-javascript","status":"publish","type":"post","link":"https:\/\/codebitshub.com\/reading-json-file-in-javascript\/","title":{"rendered":"Reading JSON File In Javascript + Working With JSON"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Reading a JSON file in javascript is simple. In this tutorial, you will learn how you can read and load JSON files in javascript code.<\/span><\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey 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: #999;color:#999\" 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: #999;color:#999\" 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:\/\/codebitshub.com\/reading-json-file-in-javascript\/#What_is_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:\/\/codebitshub.com\/reading-json-file-in-javascript\/#JSON_structure\" >JSON structure<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/codebitshub.com\/reading-json-file-in-javascript\/#Reading_JSON_file_with_fetch\" >Reading JSON file with fetch<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/codebitshub.com\/reading-json-file-in-javascript\/#Extra_bits\" >Extra bits<\/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:\/\/codebitshub.com\/reading-json-file-in-javascript\/#Parsing_JSON\" >Parsing JSON<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/codebitshub.com\/reading-json-file-in-javascript\/#JSON_stringify\" >JSON stringify<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/codebitshub.com\/reading-json-file-in-javascript\/#Summary\" >Summary<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"What_is_JSON\"><\/span><span style=\"font-weight: 400;\">What is JSON?<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">First of all, let\u2019s see what is JSON.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">JSON stands for Javascript Object Notation and is a format for storing and transporting data.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you are already familiar with XML, JSON is an alternative format to exchange data between a client and a server.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">A JSON information is a string that follows JavaScript object literal format. Let\u2019s see an example<\/span><\/p>\n<p><iframe style=\"width: 100%; height: 500px; border: 0; border-radius: 4px; overflow: hidden;\" title=\"test\" src=\"https:\/\/codesandbox.io\/embed\/reading-json-file-in-javascript-98dht?module=json.json&amp;view=editor\" sandbox=\"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><\/iframe><\/p>\n<p><span style=\"font-weight: 400;\">The JSON data above are a valid JSON string that describes a dog breed named Cretan Hound and provides useful information. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">This format can be sent from a web server to a web client. Next, the client can parse the JSON data and display the information to the user.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"JSON_structure\"><\/span><span style=\"font-weight: 400;\">JSON structure<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">As I mentioned before JSON is a string that resembles a Javascript literal format. A JSON string can have the same basic types with a Javascript object like strings, numbers arrays booleans, and other object literals.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">There are popular several tools online that you can use to <\/span><a href=\"https:\/\/jsonformatter.curiousconcept.com\/\"><span style=\"font-weight: 400;\">validate<\/span><\/a><span style=\"font-weight: 400;\"> the format of a JSON string.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Reading_JSON_file_with_fetch\"><\/span><span style=\"font-weight: 400;\">Reading JSON file with fetch<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Let\u2019s see an example of reading a JSON file in Javascript.<\/span><\/p>\n<p><iframe style=\"width: 100%; height: 500px; border: 0; border-radius: 4px; overflow: hidden;\" title=\"test\" src=\"https:\/\/codesandbox.io\/embed\/reading-json-file-in-javascript-98dht?module=script.js&amp;view=editor\" sandbox=\"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><\/iframe><\/p>\n<p><span style=\"font-weight: 400;\">In the code above, I declared an arrow function to load a URL. The URL represents the file path that contains the JSON information that I want to load in my code.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Next, I pass the URL parameter to the function <strong>loadJson<\/strong>. The function <strong>loadJson<\/strong> uses the Request Interface to represent a Resource request.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Additionally, I use the <\/span><b>fetch<\/b><span style=\"font-weight: 400;\"> API in order to retrieve the data from the resource request.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Since the loadJson function uses the <\/span><b>fetch<\/b><span style=\"font-weight: 400;\"> API it will be asynchronous so I am declaring it with the keyword <\/span><a href=\"http:\/\/codebitshub.com\/javascript-await-async\" target=\"_blank\" rel=\"noopener\"><b>async<\/b><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The fetch function will return a promise so in order to read the response form the fetch I will have to use <\/span><b>await<\/b><span style=\"font-weight: 400;\"> keyword.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In the logs, you can see that the response object contains useful information such as the status of the request, the body, the type, and others.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">It also inherits from its prototype two useful methods.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The text method and the JSON method which we usually use in order to retrieve the data. Both methods are asynchronous and have to be used with the await keyword ahead in order to resolve the promise that is returned.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In this example, I am using the JSON method json() so I use the await keyword for a second time.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Finally, the promise will resolve in the JSON data that can be used as the return value of the loadJson function.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Extra_bits\"><\/span><span style=\"font-weight: 400;\">Extra bits<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">In this section, you can read some extra useful methods that you can use while working with JSON strings<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Parsing_JSON\"><\/span><span style=\"font-weight: 400;\">Parsing JSON<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">A JSON string can be transferred in text format too. In order to validate and convert the string to a JSON object, we can use the <strong>JSON.parse<\/strong> method.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let&#8217;s see the previous example using the response.text method and the JSON.parse method.<\/span><\/p>\n<p><iframe style=\"width: 100%; height: 500px; border: 0; border-radius: 4px; overflow: hidden;\" title=\"test\" src=\"https:\/\/codesandbox.io\/embed\/json-parse-osygv?file=\/script.js?module=script.js&amp;view=editor\" sandbox=\"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><\/iframe><\/p>\n<p><span style=\"font-weight: 400;\">If the JSON string is invalid then a <strong>SyntaxError<\/strong> exception will be thrown.<\/span><\/p>\n<p><iframe style=\"width: 100%; height: 500px; border: 0; border-radius: 4px; overflow: hidden;\" title=\"test\" src=\"https:\/\/codesandbox.io\/embed\/invalid-json-parse-e41uv?module=script.js&amp;view=editor\" sandbox=\"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><\/iframe><\/p>\n<p style=\"text-align: justify; border: yellow 5px solid; padding: 5px; background-color: #ffffcc;\">Uncaught SyntaxError: Unexpected token c in JSON at position 1<br \/>\nat JSON.parse (&lt;anonymous&gt;)<br \/>\nat script.js:5:25<\/p>\n<h3><span class=\"ez-toc-section\" id=\"JSON_stringify\"><\/span><span style=\"font-weight: 400;\">JSON stringify<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">On the other hand, we can convert an Object to a JSON string using the <strong>JSON.stringify<\/strong> method.<\/span><i><\/i><\/p>\n<p><iframe style=\"width: 100%; height: 500px; border: 0; border-radius: 4px; overflow: hidden;\" title=\"test\" src=\"https:\/\/codesandbox.io\/embed\/json-stringify-qbe6n?module=script.js&amp;view=editor\" sandbox=\"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><\/iframe><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Summary\"><\/span><span style=\"font-weight: 400;\">Summary<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Let\u2019s summarize what you learned in this tutorial<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">You can use the <strong>fetch API<\/strong> in order to read a file in javascript<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">JSON is a format structure that you can use to exchange data between a client and a server<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">You can use <strong>JSON.parse<\/strong> method in order to validate and parse a JSON string<\/span><\/li>\n<li aria-level=\"1\">You can convert a JSON object to a JSON string with the method <strong>JSON.stringify<\/strong><\/li>\n<\/ul>\n<p>Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Reading a JSON file in javascript is simple. In this tutorial, you will learn how you can read and load JSON files in javascript code. What is JSON? First of all, let\u2019s see what is JSON.\u00a0 JSON stands for Javascript Object Notation and is a format for storing and transporting data.\u00a0 If you are already [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":24,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"nf_dc_page":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[11],"tags":[17],"post_folder":[],"class_list":["post-440","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programming-languages","tag-javascript","post-list-post__standard"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Reading JSON File In Javascript + Working With JSON - codebitshub.com<\/title>\n<meta name=\"description\" content=\"Reading JSON File In Javascript + Working With JSON Reading a JSON file in javascript using examples with fetch API\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codebitshub.com\/reading-json-file-in-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Reading JSON File In Javascript + Working With JSON - codebitshub.com\" \/>\n<meta property=\"og:description\" content=\"Reading JSON File In Javascript + Working With JSON Reading a JSON file in javascript using examples with fetch API\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codebitshub.com\/reading-json-file-in-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"codebitshub.com\" \/>\n<meta property=\"article:published_time\" content=\"2022-02-05T10:58:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-02-05T20:54:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/book-g6669afebe_1920.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1125\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"myapos\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"myapos\" \/>\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:\\\/\\\/codebitshub.com\\\/reading-json-file-in-javascript\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/reading-json-file-in-javascript\\\/\"},\"author\":{\"name\":\"myapos\",\"@id\":\"https:\\\/\\\/codebitshub.com\\\/#\\\/schema\\\/person\\\/8f2b53c479aa7e7bb9a24a50b9b51e61\"},\"headline\":\"Reading JSON File In Javascript + Working With JSON\",\"datePublished\":\"2022-02-05T10:58:19+00:00\",\"dateModified\":\"2022-02-05T20:54:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/reading-json-file-in-javascript\\\/\"},\"wordCount\":643,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/reading-json-file-in-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/codebitshub.com\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/book-g6669afebe_1920.jpg\",\"keywords\":[\"javascript\"],\"articleSection\":[\"Programming Languages\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/codebitshub.com\\\/reading-json-file-in-javascript\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/codebitshub.com\\\/reading-json-file-in-javascript\\\/\",\"url\":\"https:\\\/\\\/codebitshub.com\\\/reading-json-file-in-javascript\\\/\",\"name\":\"Reading JSON File In Javascript + Working With JSON - codebitshub.com\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/reading-json-file-in-javascript\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/reading-json-file-in-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/codebitshub.com\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/book-g6669afebe_1920.jpg\",\"datePublished\":\"2022-02-05T10:58:19+00:00\",\"dateModified\":\"2022-02-05T20:54:59+00:00\",\"description\":\"Reading JSON File In Javascript + Working With JSON Reading a JSON file in javascript using examples with fetch API\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/reading-json-file-in-javascript\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/codebitshub.com\\\/reading-json-file-in-javascript\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/codebitshub.com\\\/reading-json-file-in-javascript\\\/#primaryimage\",\"url\":\"https:\\\/\\\/codebitshub.com\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/book-g6669afebe_1920.jpg\",\"contentUrl\":\"https:\\\/\\\/codebitshub.com\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/book-g6669afebe_1920.jpg\",\"width\":1920,\"height\":1125,\"caption\":\"codebitshub.com\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/codebitshub.com\\\/reading-json-file-in-javascript\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/codebitshub.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Reading JSON File In Javascript + Working With JSON\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/codebitshub.com\\\/#website\",\"url\":\"https:\\\/\\\/codebitshub.com\\\/\",\"name\":\"codebitshub.com\",\"description\":\"A blog about programming and coding\",\"publisher\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/codebitshub.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/codebitshub.com\\\/#organization\",\"name\":\"codebitshub.com\",\"url\":\"https:\\\/\\\/codebitshub.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/codebitshub.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"http:\\\/\\\/codebitshub.com\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/book-g6669afebe_1920.jpg\",\"contentUrl\":\"http:\\\/\\\/codebitshub.com\\\/wp-content\\\/uploads\\\/2022\\\/01\\\/book-g6669afebe_1920.jpg\",\"width\":1920,\"height\":1125,\"caption\":\"codebitshub.com\"},\"image\":{\"@id\":\"https:\\\/\\\/codebitshub.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/codebitshub.com\\\/#\\\/schema\\\/person\\\/8f2b53c479aa7e7bb9a24a50b9b51e61\",\"name\":\"myapos\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a35e4d21e2fa562dfe47fe5e67f5163509d4d01a363f2f4297aadf65b5bfc8ab?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a35e4d21e2fa562dfe47fe5e67f5163509d4d01a363f2f4297aadf65b5bfc8ab?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a35e4d21e2fa562dfe47fe5e67f5163509d4d01a363f2f4297aadf65b5bfc8ab?s=96&d=mm&r=g\",\"caption\":\"myapos\"},\"url\":\"https:\\\/\\\/codebitshub.com\\\/author\\\/myapos\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Reading JSON File In Javascript + Working With JSON - codebitshub.com","description":"Reading JSON File In Javascript + Working With JSON Reading a JSON file in javascript using examples with fetch API","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:\/\/codebitshub.com\/reading-json-file-in-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Reading JSON File In Javascript + Working With JSON - codebitshub.com","og_description":"Reading JSON File In Javascript + Working With JSON Reading a JSON file in javascript using examples with fetch API","og_url":"https:\/\/codebitshub.com\/reading-json-file-in-javascript\/","og_site_name":"codebitshub.com","article_published_time":"2022-02-05T10:58:19+00:00","article_modified_time":"2022-02-05T20:54:59+00:00","og_image":[{"width":1920,"height":1125,"url":"https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/book-g6669afebe_1920.jpg","type":"image\/jpeg"}],"author":"myapos","twitter_card":"summary_large_image","twitter_misc":{"Written by":"myapos","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codebitshub.com\/reading-json-file-in-javascript\/#article","isPartOf":{"@id":"https:\/\/codebitshub.com\/reading-json-file-in-javascript\/"},"author":{"name":"myapos","@id":"https:\/\/codebitshub.com\/#\/schema\/person\/8f2b53c479aa7e7bb9a24a50b9b51e61"},"headline":"Reading JSON File In Javascript + Working With JSON","datePublished":"2022-02-05T10:58:19+00:00","dateModified":"2022-02-05T20:54:59+00:00","mainEntityOfPage":{"@id":"https:\/\/codebitshub.com\/reading-json-file-in-javascript\/"},"wordCount":643,"commentCount":0,"publisher":{"@id":"https:\/\/codebitshub.com\/#organization"},"image":{"@id":"https:\/\/codebitshub.com\/reading-json-file-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/book-g6669afebe_1920.jpg","keywords":["javascript"],"articleSection":["Programming Languages"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codebitshub.com\/reading-json-file-in-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codebitshub.com\/reading-json-file-in-javascript\/","url":"https:\/\/codebitshub.com\/reading-json-file-in-javascript\/","name":"Reading JSON File In Javascript + Working With JSON - codebitshub.com","isPartOf":{"@id":"https:\/\/codebitshub.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codebitshub.com\/reading-json-file-in-javascript\/#primaryimage"},"image":{"@id":"https:\/\/codebitshub.com\/reading-json-file-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/book-g6669afebe_1920.jpg","datePublished":"2022-02-05T10:58:19+00:00","dateModified":"2022-02-05T20:54:59+00:00","description":"Reading JSON File In Javascript + Working With JSON Reading a JSON file in javascript using examples with fetch API","breadcrumb":{"@id":"https:\/\/codebitshub.com\/reading-json-file-in-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codebitshub.com\/reading-json-file-in-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codebitshub.com\/reading-json-file-in-javascript\/#primaryimage","url":"https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/book-g6669afebe_1920.jpg","contentUrl":"https:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/book-g6669afebe_1920.jpg","width":1920,"height":1125,"caption":"codebitshub.com"},{"@type":"BreadcrumbList","@id":"https:\/\/codebitshub.com\/reading-json-file-in-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codebitshub.com\/"},{"@type":"ListItem","position":2,"name":"Reading JSON File In Javascript + Working With JSON"}]},{"@type":"WebSite","@id":"https:\/\/codebitshub.com\/#website","url":"https:\/\/codebitshub.com\/","name":"codebitshub.com","description":"A blog about programming and coding","publisher":{"@id":"https:\/\/codebitshub.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codebitshub.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codebitshub.com\/#organization","name":"codebitshub.com","url":"https:\/\/codebitshub.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codebitshub.com\/#\/schema\/logo\/image\/","url":"http:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/book-g6669afebe_1920.jpg","contentUrl":"http:\/\/codebitshub.com\/wp-content\/uploads\/2022\/01\/book-g6669afebe_1920.jpg","width":1920,"height":1125,"caption":"codebitshub.com"},"image":{"@id":"https:\/\/codebitshub.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/codebitshub.com\/#\/schema\/person\/8f2b53c479aa7e7bb9a24a50b9b51e61","name":"myapos","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/a35e4d21e2fa562dfe47fe5e67f5163509d4d01a363f2f4297aadf65b5bfc8ab?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/a35e4d21e2fa562dfe47fe5e67f5163509d4d01a363f2f4297aadf65b5bfc8ab?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a35e4d21e2fa562dfe47fe5e67f5163509d4d01a363f2f4297aadf65b5bfc8ab?s=96&d=mm&r=g","caption":"myapos"},"url":"https:\/\/codebitshub.com\/author\/myapos\/"}]}},"_links":{"self":[{"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/posts\/440","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/comments?post=440"}],"version-history":[{"count":6,"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/posts\/440\/revisions"}],"predecessor-version":[{"id":506,"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/posts\/440\/revisions\/506"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/media\/24"}],"wp:attachment":[{"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/media?parent=440"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/categories?post=440"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/tags?post=440"},{"taxonomy":"post_folder","embeddable":true,"href":"https:\/\/codebitshub.com\/wp-json\/wp\/v2\/post_folder?post=440"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}