How to Read a JSON file with jQuery

John on January 29, 2021

To read a JSON file with jQuery, use the getJSON() method. Let's have a look at the syntax of this method before writing an example to get JSON content from a file and use it in a program.

The getJSON() Syntax

getJSON() accepts three parameters; the first is required and the last two are optional.

jQuery.getJSON( url [, data ] [, success ] )

• url - The path to the location of the JSON file.
• data - Data from the file; a function can be used here to do something with the JSON content.
• success - a callback function that is used if the request was successful.

Read a JSON File and use the Data

The example code below demonstrates how to open a JSON file, loop through the data and read the value of an object property with jQuery.

[
  { "country": "Afghanistan", "code": "93" },
  { "country": "Albania", "code": "355" },
  { "country": "Algeria", "code": "213" },
  { "country": "American Samoa", "code": "1" }
]

var filePath = '/js/country_codes.json';

$.getJSON(filePath, function( data ) {
  $.each( data, function( key, val ) {
    console.log(val['country']);
  });
});

Afghanistan
Albania
Algeria
Algeria