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:


  "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.first_name + " "+field.last_name + " <br>";

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

How to Load a JSON file in Angular2 Angular2 makes it very easy for us to load data from JSON files, we can do it by simply making a http request. Now let's see how we can do that. To be able to make Http requests we first have to import the HttpModule on the app.module.ts, once you've done that your code should look like this: ...
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...
Node.js Tutorial: Reading and Writing files Reading and writing files is a very trivial task, no matter what programming language you use you probably have already came across a situation where you had to do it, and it's not different for node.js developers, luckily node.js makes this task very easy for us, with the file system(fs) module we ...
Node.js: How to make POST Requests with JSON data In this post I'm going to show you how to work with POST requests, I'll give you an example as simple as possible. First I'll create the Nodejs app to receive the requests, then I'll show you how to make the requests from the frontend. We're going to be using Expressjs, it's a very popular npm pa...

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>