{"id":7782,"date":"2018-11-11T14:36:53","date_gmt":"2018-11-11T19:36:53","guid":{"rendered":"https:\/\/www.carnaghan.com\/?p=7782"},"modified":"2019-07-28T15:10:04","modified_gmt":"2019-07-28T20:10:04","slug":"using-javascript-fetch-api-to-retrieve-sample-json-data","status":"publish","type":"post","link":"https:\/\/www.carnaghan.com\/using-javascript-fetch-api-to-retrieve-sample-json-data\/","title":{"rendered":"Using JavaScript Fetch API to Retrieve sample JSON data"},"content":{"rendered":"

A while ago I wrote an article called Using jQuery.AJAX() to Retrieve Sample JSON Data<\/a>. Since this time I’ve been slowly using more and more native JavaScript to get things done, so I thought it was time to revisit this concept using the fetch() API.<\/p>\n

It has been very convenient over the years to use jQuery to simplify tasks that otherwise would have been more challenging to write in native JavaScript. Since ES6 has become pretty much mainstream nowadays, it is safe to take advantage of some of the features and benefits it brings.<\/p><\/blockquote>\n

This article will walk you though setting up a basic response using the fetch API.<\/p>\n

What is Fetch API?<\/h2>\n

According to MDN Web Docs, Fetch API simply provides an interface for fetching resources. It provides a more powerful feature set over the traditional XMLHttpRequest, and it is easier to use. The fetch() method<\/p>\n

    \n
  • accepts<\/strong> one mandatory argument (this should be the path to your API or JSON resource)<\/li>\n
  • returns<\/strong> a promise (the promise will resolve to the JSON response)<\/li>\n<\/ul>\n

    Because of its simplicity, fetch has quickly become the common goto method for consuming responses from API endpoints, or in the case of the example covered here, a simple JSON response from a static file.<\/p>\n

    Writing the JSON File<\/h2>\n

    To get started we will need to first create a basic JSON file.\u00a0If you followed my previous article, we will be using the same JSON file, which lists five training and reading resources for JavaScript detailed below.<\/p>\n

      \n
    • You Don’t know JS – Book Series (Kyle Simpson):\u00a0https:\/\/github.com\/getify\/You-Dont-Know-JS<\/li>\n
    • Shaping Up with Angular.JS (Code School):\u00a0https:\/\/www.codeschool.com\/courses\/shaping-up-with-angular-js<\/li>\n
    • HTML\/JS: Making webpages interactive with jQuery (Khan Academy):\u00a0https:\/\/www.khanacademy.org\/computing\/computer-programming\/html-js-jquery<\/li>\n
    • JQuery\u00a0AJAX (W3 Schools):\u00a0http:\/\/www.w3schools.com\/jquery\/jquery_ajax_intro.asp<\/li>\n
    • JQuery API Documentation (jQuery):\u00a0https:\/\/api.jquery.com\/<\/li>\n<\/ul>\n

      Each of the entries include name, provider (or author), and URL of the resource. Copy and paste the JSON code below into a text file and call it resources.json<\/strong>. Keep in mind in real life we would most likely be hitting an API endpoint with our fetch call, however for the sake of keeping this simple we are using a static file.<\/p>\n