How to Load a JSON file in Javascript

In this post I’m going to give you a very simple example of how to read a JSON file and display the data on the page. I’ll be using jQuery in this example, so if you don’t have it on your project don’t forget to add the script.

So let’s get started, first we need a JSON, you probably already have yours, but for this example I’m using this one:

data.json

[{
  "id": 1,
  "first_name": "Larry",
  "last_name": "Gebhardt"
}, {
  "id": 2,
  "first_name": "Dorothy",
  "last_name": "Portress"
}, {
  "id": 3,
  "first_name": "Selby",
  "last_name": "Rudolfer"
}, {
  "id": 4,
  "first_name": "Coraline",
  "last_name": "Aspel"}
]

This file has to be placed somewhere accessible via HTTP, I’m putting it on the same folder my HTML page is located.

jQuery provides the function getJSON for us, it receives two parameters: the JSON url and a callback function to handle the data. Here’s how we can use it:

 
jQuery.getJSON("data.json", handleJSON);
 
function handleJSON(result){
   jQuery.each(result, printFields);
}
 
function printFields(i, field){
   let row = field.id + " "+field.first_name + " "+field.last_name + " <br>";
   jQuery("div").append(row);
}

First I used jQuery.getJSON to retrieve the data, once we have the result it is passed to the function handleJSON, which is using the jQuery.each to go through the data. Each item from the dataset will be passed to the printFields function, which creates a string with all the fields and append it to an HTML component.

Easy, right? If you run your project now you’ll see the data on your page. If you have any doubts please let me know in the comments.

Recommended for you

Error: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-ext... If you are facing this error it's because your page is trying to load a local file using file:// or C:/ (you can see it in the URL on your browser). It happened to me one time, that's because I created a HTML page and simply double-clicked on it to open it on the browser, my page was using a JSON fi...
Tutorial: Implementing Infinite Scroll with AngularJS and ngInfiniteScroll Over the past few years the infinite scroll has became very popular across the web, developers are increasingly choosing to use infinite scroll over the conventional paginator. The advantage is that it doesn't require the user to manually go to the next page when he reaches the end of the page, it a...
Tutorial: Creating Reusable Code with AngularJS Directives I know this may not be new for most of you, but when it comes to directives a lot of people still get really confused, so let's start by looking at its definition, according to AngularJS documentacion: Directives are markers on a DOM element (such as an attribute, element name, comment or CSS...
How to load a JSON file in Reactjs It's really easy to load data from a JSON file in React. In this post I'm going to show you how you can do that. First, of course, we need a JSON file, you probably already have yours, but I'm using this movies list for this example: data.json Now we have to place this file somewhere ins...

Leave a Reply

Your email address will not be published. Required fields are marked *

Obs: Use the tag <pre lang="LANGUAGE"> to include code blocks to your comment.
Example: <pre lang="javascript"> console.log('Test'); </pre>