{"id":6992,"date":"2024-03-14T04:54:51","date_gmt":"2024-03-14T04:54:51","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/how-to-use-getjson\/"},"modified":"2025-08-02T10:44:25","modified_gmt":"2025-08-02T10:44:25","slug":"how-to-use-getjson","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/how-to-use-getjson\/","title":{"rendered":"jQuery getJSON() Guide: Load JSON Data"},"content":{"rendered":"<p>The getjson() method in jQuery is used to load data in JSON format from a server. It is used to send an HTTP GET request and retrieve JSON data from the server. This method makes it easy to fetch data from the server and then display or manipulate it on the webpage.<\/p>\n<p>The basic syntax for using the getjson() method is as follows:<\/p>\n<pre class=\"post-pre\"><code>$.<span class=\"hljs-title function_\">getJSON<\/span>(url, data, success);\r\n<\/code><\/pre>\n<ol>\n<li>URL: The address where the data needs to be loaded from.<\/li>\n<li>Data: Optional parameter that is sent to the server.<\/li>\n<li>Success: an optional parameter, the callback function to be executed upon a successful request.<\/li>\n<\/ol>\n<p>For example, the following code demonstrates how to use the getjson() method to fetch JSON data from the server and display this data on the page.<\/p>\n<pre class=\"post-pre\"><code>$.<span class=\"hljs-title function_\">getJSON<\/span>(<span class=\"hljs-string\">'data.json'<\/span>, <span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">data<\/span>) {\r\n  $.<span class=\"hljs-title function_\">each<\/span>(data, <span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">key, value<\/span>) {\r\n    $(<span class=\"hljs-string\">'body'<\/span>).<span class=\"hljs-title function_\">append<\/span>(<span class=\"hljs-string\">'&lt;p&gt;'<\/span> + key + <span class=\"hljs-string\">': '<\/span> + value + <span class=\"hljs-string\">'&lt;\/p&gt;'<\/span>);\r\n  });\r\n});\r\n<\/code><\/pre>\n<p>The code above will load JSON data from a file named data.json, then iterate over the data using the $.each() method and display each key-value pair on the page.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The getjson() method in jQuery is used to load data in JSON format from a server. It is used to send an HTTP GET request and retrieve JSON data from the server. This method makes it easy to fetch data from the server and then display or manipulate it on the webpage. The basic syntax [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[363,8842,8844,8843,326],"class_list":["post-6992","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-ajax","tag-jquery-getjson","tag-jquery-tutorial","tag-json-data","tag-web-development"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>jQuery getJSON() Guide: Load JSON Data - Blog - Silicon Cloud<\/title>\n<meta name=\"description\" content=\"Learn how to use jQuery&#039;s getJSON() method to fetch and display JSON data from servers with this step-by-step guide.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/blog\/how-to-use-getjson\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"jQuery getJSON() Guide: Load JSON Data\" \/>\n<meta property=\"og:description\" content=\"Learn how to use jQuery&#039;s getJSON() method to fetch and display JSON data from servers with this step-by-step guide.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/how-to-use-getjson\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-14T04:54:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-02T10:44:25+00:00\" \/>\n<meta name=\"author\" content=\"Ava Mitchell\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:site\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ava Mitchell\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-getjson\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-getjson\/\"},\"author\":{\"name\":\"Ava Mitchell\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/a3e2658c2cb9fb2be95ae0a8861f4a64\"},\"headline\":\"jQuery getJSON() Guide: Load JSON Data\",\"datePublished\":\"2024-03-14T04:54:51+00:00\",\"dateModified\":\"2025-08-02T10:44:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-getjson\/\"},\"wordCount\":159,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"keywords\":[\"AJAX\",\"jQuery getJSON\",\"jQuery tutorial\",\"JSON data\",\"web development\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-getjson\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-getjson\/\",\"name\":\"jQuery getJSON() Guide: Load JSON Data - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-14T04:54:51+00:00\",\"dateModified\":\"2025-08-02T10:44:25+00:00\",\"description\":\"Learn how to use jQuery's getJSON() method to fetch and display JSON data from servers with this step-by-step guide.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-getjson\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/how-to-use-getjson\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-getjson\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"jQuery getJSON() Guide: Load JSON Data\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"name\":\"Silicon Cloud Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\",\"name\":\"Silicon Cloud Blog\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"contentUrl\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"width\":1024,\"height\":1024,\"caption\":\"Silicon Cloud Blog\"},\"image\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\",\"https:\/\/twitter.com\/SiliCloudGlobal\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/a3e2658c2cb9fb2be95ae0a8861f4a64\",\"name\":\"Ava Mitchell\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/15c63cd0564b4a2e07d611bcdffa296f6ea80e8db07c3091f43a84010514899d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/15c63cd0564b4a2e07d611bcdffa296f6ea80e8db07c3091f43a84010514899d?s=96&d=mm&r=g\",\"caption\":\"Ava Mitchell\"},\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/avamitchell\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"jQuery getJSON() Guide: Load JSON Data - Blog - Silicon Cloud","description":"Learn how to use jQuery's getJSON() method to fetch and display JSON data from servers with this step-by-step guide.","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:\/\/www.silicloud.com\/blog\/how-to-use-getjson\/","og_locale":"en_US","og_type":"article","og_title":"jQuery getJSON() Guide: Load JSON Data","og_description":"Learn how to use jQuery's getJSON() method to fetch and display JSON data from servers with this step-by-step guide.","og_url":"https:\/\/www.silicloud.com\/blog\/how-to-use-getjson\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-14T04:54:51+00:00","article_modified_time":"2025-08-02T10:44:25+00:00","author":"Ava Mitchell","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Ava Mitchell","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/how-to-use-getjson\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-use-getjson\/"},"author":{"name":"Ava Mitchell","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/a3e2658c2cb9fb2be95ae0a8861f4a64"},"headline":"jQuery getJSON() Guide: Load JSON Data","datePublished":"2024-03-14T04:54:51+00:00","dateModified":"2025-08-02T10:44:25+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-use-getjson\/"},"wordCount":159,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"keywords":["AJAX","jQuery getJSON","jQuery tutorial","JSON data","web development"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/how-to-use-getjson\/","url":"https:\/\/www.silicloud.com\/blog\/how-to-use-getjson\/","name":"jQuery getJSON() Guide: Load JSON Data - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-14T04:54:51+00:00","dateModified":"2025-08-02T10:44:25+00:00","description":"Learn how to use jQuery's getJSON() method to fetch and display JSON data from servers with this step-by-step guide.","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-use-getjson\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/how-to-use-getjson\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/how-to-use-getjson\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"jQuery getJSON() Guide: Load JSON Data"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/blog\/#website","url":"https:\/\/www.silicloud.com\/blog\/","name":"Silicon Cloud Blog","description":"","publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.silicloud.com\/blog\/#organization","name":"Silicon Cloud Blog","url":"https:\/\/www.silicloud.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","contentUrl":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","width":1024,"height":1024,"caption":"Silicon Cloud Blog"},"image":{"@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/SiliCloudGlobal\/","https:\/\/twitter.com\/SiliCloudGlobal"]},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/a3e2658c2cb9fb2be95ae0a8861f4a64","name":"Ava Mitchell","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/15c63cd0564b4a2e07d611bcdffa296f6ea80e8db07c3091f43a84010514899d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/15c63cd0564b4a2e07d611bcdffa296f6ea80e8db07c3091f43a84010514899d?s=96&d=mm&r=g","caption":"Ava Mitchell"},"url":"https:\/\/www.silicloud.com\/blog\/author\/avamitchell\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/6992","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=6992"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/6992\/revisions"}],"predecessor-version":[{"id":151765,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/6992\/revisions\/151765"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=6992"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=6992"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=6992"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}