{"id":6822,"date":"2010-07-12T16:53:28","date_gmt":"2010-07-12T23:53:28","guid":{"rendered":"http:\/\/css-tricks.com\/"},"modified":"2010-07-12T16:53:28","modified_gmt":"2010-07-12T23:53:28","slug":"jquery-json-error-catching","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/snippets\/jquery\/jquery-json-error-catching\/","title":{"rendered":"jQuery JSON getting with error catching"},"content":{"rendered":"

jQuery has a built in function called getJSON() to help making AJAX requests for JSON data easier. It normally works great, but if that function gets invalid data (or nothing) back, the callback function will not fire. If there is a legitimate risk of that, you can do this instead to catch for those errors. <\/p>\n

$.get('\/path\/to\/url', function (data) {\r\n  if( !data || data === \"\"){\r\n    \/\/ error\r\n    return;\r\n  }\r\n  var json;\r\n  try {\r\n    json = jQuery.parseJSON(data);\r\n  } catch (e) {\r\n    \/\/ error\r\n    return;\r\n  }\r\n  \r\n  \/\/ use json here\r\n  \r\n}, \"text\");<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"

jQuery has a built in function called getJSON() to help making AJAX requests for JSON data easier. It normally works great, but if that function gets invalid data (or nothing) back, the callback function will not fire. If there is a legitimate risk of that, you can do this instead to catch for those errors. […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":3245,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-snippet.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":152220,"url":"https:\/\/css-tricks.com\/lodge\/learn-jquery\/18-ajax-json\/","url_meta":{"origin":6822,"position":0},"title":"#18: Ajax and JSON","date":"October 7, 2013","format":false,"excerpt":"There is a good chance that out in the \"real world\", the #1 thing you use Ajax for is sending and receiving JSON data. And for good reason. JSON doesn't presume any visual structure like HTML does. It's just raw data and you can do with it what you will,\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":15978,"url":"https:\/\/css-tricks.com\/snippets\/javascript\/saving-contenteditable-content-changes-as-json-with-ajax\/","url_meta":{"origin":6822,"position":1},"title":"Saving contenteditable Content Changes as JSON with Ajax","date":"January 10, 2012","format":false,"excerpt":"Elements with the contenteditable attribute can be live-edited right in the browser window. But of course those changes don't affect the actual document on your server, so those changes don't persist with a page refresh. One way to save the data would be to wait for the return key to\u2026","rel":"","context":"With 13 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3854,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/serialize-form-to-json\/","url_meta":{"origin":6822,"position":2},"title":"Serialize Form to JSON","date":"September 4, 2009","format":false,"excerpt":"$.fn.serializeObject = function() { var o = {}; var a = this.serializeArray(); $.each(a, function() { if (o[this.name]) { if (!o[this.name].push) { o[this.name] = [o[this.name]]; } o[this.name].push(this.value || ''); } else { o[this.name] = this.value || ''; } }); return o; };","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":376818,"url":"https:\/\/css-tricks.com\/glossary-of-terms-for-theme-json\/","url_meta":{"origin":6822,"position":3},"title":"Glossary of Terms for theme.json","date":"January 31, 2023","format":false,"excerpt":"To kick things off, let\u2019s begin by reviewing a few glossary terms that are important for understanding what the theme.json file is, how it is structured, and how to configure it. We\u2019ll cover examples as we go, but the main goal here is to get familiar with terms that we\u2019ll\u2026","rel":"","context":"In \"json\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/02\/guide-wordpress-block-theme-css.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":4584,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/show-most-recent-picasaweb-uploads\/","url_meta":{"origin":6822,"position":4},"title":"Show Most Recent Picasaweb Uploads","date":"October 30, 2009","format":false,"excerpt":"Replace the \"tester\" username below with your own, and the target value with the selector of the element you wish to append the pictures to. $(document).ready(function() { $.getJSON(\"http:\/\/picasaweb.google.com\/data\/feed\/base\/user\/tester\/?kind=photo&access=public&alt=json&callback=?\", function(data) { var target = \"#latest-picasaweb-images ul\"; \/\/ Where is it going? for (i = 0; i","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":152216,"url":"https:\/\/css-tricks.com\/lodge\/learn-jquery\/17-posting-ajax\/","url_meta":{"origin":6822,"position":5},"title":"#17: POSTing with Ajax","date":"October 7, 2013","format":false,"excerpt":"We talked about GET in the last video but didn't give POST enough attention. So I thought we'd do that here. The big difference with POST is that you nearly always need to pass along data with the request. That data can take many forms, but it might just be\u2026","rel":"","context":"With 3 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/6822"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=6822"}],"version-history":[{"count":1,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/6822\/revisions"}],"predecessor-version":[{"id":6823,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/6822\/revisions\/6823"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3245"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=6822"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=6822"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}