Tania Rascia Web Design and Development

Skip Navigation
How to Use JSON Data with PHP or JavaScript

How to Use JSON Data with PHP or JavaScript

By Tania Rascia  /  115 responses

Learn what a JSON feed is, and how to extract its data with PHP, JavaScript, or jQuery.

JSON is used to transmit data between a server and a browser. Here is a basic example of what might be in a .json string.

{
  "name": "Tania",
  "title": "Web Developer",
  "website": "https://www.taniarascia.com"
}

As you can see, it’s a human readable format of data that might traditionally be stored in a table. Some companies might have public .json files located that you can access and extract data from (an API you can connect to). You might also save a .json file somewhere in your project that you want to extract data from.

Goals

JSON data can be accessed and utilized with many programming languages. In this tutorial, we’ll learn how to access JSON with PHP and JavaScript.

Prerequisites

What is JSON?

JSON stands for JavaScript Object Notation. It is data saved in a .json file, and consists of a series of key/value pairs.

{ "key": "value" }

The value of any JSON key can be a string, Boolean, number, null, array, or object. Comments are not allowed in JSON.

Although JSON resembles an object or an array, JSON is a string. A serialized string, which means it can later be parsed and decoded into data types.

Using data from JSON with PHP

First, to drill in that JSON is simply a string, we’re going to write JSON into a PHP string and apply it to a variable called $data.

$data = '{
	"name": "Aragorn",
	"race": "Human"
}';

Then we’ll use the json_decode() function to convert the JSON string into a PHP object.

$character = json_decode($data);

Now we can access it as a PHP object.

echo $character->name;

Here’s the whole file.

<?php

$data = '{
	"name": "Aragorn",
	"race": "Human"
}';

$character = json_decode($data);
echo $character->name;

Here is the output.

Aragorn

Accessing a JSON feed from a URL

From here out, we’ll put all JSON data into its own .json file. This way, we can retrieve the contents of the file instead of keeping it as a PHP string.

Here’s what data.json will look like.

[
	{
		"name": "Aragorn",
		"race": "Human"
	},	
	{
		"name": "Legolas",
		"race": "Elf"
	},
	{
		"name": "Gimli",
		"race": "Dwarf"
	}
]

And here’s how we’ll extract that data in PHP.

$url = 'data.json'; // path to your JSON file
$data = file_get_contents($url); // put the contents of the file into a variable
$characters = json_decode($data); // decode the JSON feed

In order to get one entry, we’ll have to access the appropriate array number. Remember, counting begins with 0 in programming.

echo $characters[0]->name;
Aragorn

I can access all the data in the array with a foreach loop.

foreach ($characters as $character) {
	echo $character->name . '<br>';
}
Aragorn Legolas Gimli

Here is the full PHP file.

<?php

$url = 'data.json'; // path to your JSON file
$data = file_get_contents($url); // put the contents of the file into a variable
$characters = json_decode($data); // decode the JSON feed

echo $characters[0]->name;

foreach ($characters as $character) {
	echo $character->name . '<br>';
}

We can display the data in a table, for an example.

<table>
	<tbody>
		<tr>
			<th>Name</th>
			<th>Race</th>
		</tr>
		<?php foreach ($characters as $character) : ?>
        <tr>
            <td> <?php echo $character->name; ?> </td>
            <td> <?php echo $character->race; ?> </td>
        </tr>
		<?php endforeach; ?>
	</tbody>
</table>
Name Race
Aragorn Human
Gimli Dwarf
Legolas Elf

In this example, I’m using the alternate syntax for foreach, which looks like foreach() : /* loop */ endforeach; instead of foreach() { /* loop */ }. This is often preferable when outputting HTML.

Using associative arrays

There’s another way we can access the data in PHP. If you pass true as the argument in json_decode(), the data becomes an associative array instead of an object. This means we’ll be using square bracket notation[] instead of the skinny arrow->.

$characters = json_decode($data, true); // decode the JSON feed and make an associative array

Instead of ->race, we will access the value with ['race'].

echo $characters[0]['race'];
Human

And here’s how to access the loop.

foreach ($characters as $character) {
	echo $character['race'] . "\n";
}
Human Elf Dwarf

Getting data from nested arrays

So far, we’ve only used JSON feeds with key/value pairs, but it’s common to encounter nesting. Here’s another nerdy example, which we can save in a new file called wizards.json.

[
	{
		"name": "Harry Potter",
		"wand": [
			{
				"core": "phoenix feather",
				"length": "11 inches",
				"wood": "holly"
			}
		]
	},
	{
		"name": "Hermione Granger",
		"wand": [
			{
				"core": "dragon heartstring",
				"length": "10 and 3/4 inches",
				"wood": "vine"
			}
		]
	}
]

Decoding the feed.

$url = 'wizards.json'; 
$data = file_get_contents($url); 
$wizards = json_decode($data, true);

We’ll be able to access the nested array using $wizard['key'][0]['key'] in a loop, or whatever number corresponds correctly if you only want to print one.

foreach ($wizards as $wizard) {
	echo $wizard['name'] . '\'s wand is ' . 
			 $wizard['wand'][0]['wood'] . ', ' . 
		   $wizard['wand'][0]['length'] . ', with a ' . 
		   $wizard['wand'][0]['core'] . ' core. <br>' ;
}
Harry Potter's wand is holly, 11 inches, with a phoenix feather core. Hermione Granger's wand is vine, 10 and 3/4 inches, with a dragon heartstring core.

Converting a PHP object or array into JSON

Just as you use json_decode() to turn JSON into PHP, you can turn PHP into JSON with json_encode().

$data = [
	'name' => 'Aragorn',
	'race' => 'Human'
];

echo json_encode($data);

We made a PHP array and encoded it. Here’s the output:

{"name":"Aragorn","race":"Human"}

Using data from JSON with JavaScript

We’re going to create a JavaScript variable called data and apply the JSON string.

var data = '[ { "name": "Aragorn", "race": "Human" }, { "name": "Gimli", "race": "Dwarf" } ]'; 

Now we’ll use JavaScript built in JSON.parse() function to decode the string.

data = JSON.parse(data);

From here we can access the data like a regular JavaScript object.

console.log(data[1].name);
Gimli

And we can loop through each iteration with a for loop.

for (var i = 0; i < data.length; i++) {
	console.log(data[i].name + ' is a ' + data[i].race + '.');
}
Aragorn is a Human. Gimli is a Dwarf.

That was easy! Now, we’ll probably need to access JSON from a URL. There’s an extra step involved, where we have to make a request to the file. Let’s just take the above JSON string and put it in data.json.

[
	{
		"name": "Aragorn",
		"race": "Human"
	},
	{
		"name": "Gimli",
		"race": "Dwarf"
	}
]

Now we’ll make an XMLHttpRequest().

var request = new XMLHttpRequest();

We’ll open the file (data.json) via GET (URL) request.

request.open('GET', 'data.json', true);

From here, we’ll parse and work with all our JSON data within the onload function.

request.onload = function () {
	// begin accessing JSON data here
}

Then finally, submit the request.

request.send();

Here’s the final code.

var request = new XMLHttpRequest();

request.open('GET', 'data.json', true);

request.onload = function () {
	// begin accessing JSON data here
	var data = JSON.parse(this.response);

	for (var i = 0; i < data.length; i++) {
		console.log(data[i].name + ' is a ' + data[i].race + '.');
	}
}

request.send();

And the output.

Aragorn is a Human. Gimli is a Dwarf.

Using Fetch

Now you can also use the Fetch API to do the same thing. Read How to Use the JavaScript Fetch API to Get JSON Data for an easier method to get this data.

// Replace ./data.json with your JSON feed
fetch('./data.json').then(response => {
  return response.json();
}).then(data => {
  // Work with JSON data here
  console.log(data);
}).catch(err => {
  // Do something for an error here
});

Using jQuery

As you can see, it’s not too difficult to retrieve a JSON feed with plain JavaScript. However, it’s even easier with jQuery, using the getJSON() function. If you don’t know how jQuery works, you’ll need to load the jQuery JavaScript library before any of this custom code.

$(document).ready(function () {
	$.getJSON('data.json', function (data) {
		// begin accessing JSON data here
			console.log(data[0].name);
	});
});

You might also see jQuery access JSON via an AJAX request, which is a little more verbose.

	$(document).ready(function () {
		var data;
		$.ajax({
			dataType: "json",
			url: 'data.json',
			data: data,
			success: function (data) {
				// begin accessing JSON data here
				console.log(data[0].name);
			}
		});
	});

Both will have the same output.

Aragorn

Conclusion

Hopefully this article has taught you a bit about what JSON is and does, and how to access JSON data with PHP, JavaScript, or jQuery.

Email List

Get friendly updates, infrequently.

Tania Rascia

Hiya. I'm Tania, a web developer from Chicago. Hope you enjoyed my ad-free, bullshit-free site. If you liked it, tell someone about it!

 GitHub  Twitter

Write a response

Your email address will not be published.

All code will be displayed literally.

Discussion

  • Hrhr says:

    Great tutorial! The layout of the site is not only beautiful, but it's also planned really well & very easy to read!

  • Nilankan says:

    Very Very helpfull … The complex things are broken down into simple explanations.

  • Farid says:

    easy to understand

  • Dajmos007 says:

    WHAT THE FU… This article is AMAIZING ! Thanks Tania for so simple 'How to' guide. This description helped my a lotttt

  • Prajakta Reke says:

    very helpful

  • tanya says:

    verrryyy helpful … thank you bless you

  • ????? says:

    Beautiful and easy to read) thank you

  • thanos says:

    You are GREAT!!! Thanks a lot

  • Dasun says:

    really help full document for those who new to API. Thanks a lot.

  • theblindguidedog says:

    Hi, I have done everything you said to do and the GET request won't work for me. I just keep getting a 500 Internal Error message. I'm unsure where I'm supposed to put the script. I've tried between <head></head>, <body></body>, I've tried an external javascript file and then put the link to the file between the <head></head>, <body></body> and still no good. I've really been struggling with these XMLHttpRequests and don't think I'm ever going to get one to do anything.

  • Charles Ashley says:

    //===PHP====

    But, Can is get the key name in a variable, for example I am reading data from some API and I need to create table column names using the key name of the JSON string. is there a way to access the key name

    For example

    {
    "name": "Tania",
    "title": "Web Developer",
    "website": "https://www.taniarascia.com&quot;
    }

    I want to have $var1="name", $var2="title". //I can put them in a loop

  • Charles Ashley says:

    Thank you so much, this is really helpful

  • Jesse David says:

    Your explanations are so concise and easy to understand! Thank you for putting this out there.

  • Jon says:

    Hello. can you help me?
    javascript only works in the F12 console.
    I need a dump to my browser.
    because document.write does not work. Thank you

  • Anonymous says:

    sad

  • F.droid says:

    Very easy to understand even for new beginners. Thanks a lot!!

  • Jeremy says:

    Hi Tania,
    I've read a few of your tutorials, they are all really easy to read.
    So… thanks!!!

  • Usb Bush says:

    hello

    Very useful your content.I have really liked it.
    Keep it up

    thx

  • Wilbert says:

    Hi Tania,

    Thanks and I love you and you content. Keep it up

  • Neil P says:

    Hi Tania,

    Thank you for your clear examples.
    Can you help me with the following, I have a read.php file where I use

    echo json_encode($rows);

    and I am picking the data up in my JavaScript file submit.js
    where I populate fields in my index.html.

    The issue that I am having is that echo is also writing the data at the bottom
    of my index.html page. Do you know why this could be happening?

  • Marvin says:

    Hey;
    I just found this website while searching for JSON simple guide.
    Very useful info, I did not succeed to add this on top of what my colleague already did, so I am now starting your examples to fully experience the thing.

    I’ll follow your other guides.
    Very appreciated
    Cheers,

  • Michael says:

    Hi,

    Thank you for the bullshit free experience: refreshing!

    QQ, for the jQuery JSON retrieval, can I use PHP? For example url: 'getData.php' ?

    The getData PHP file is echo echo 'json_encode($data);' so it’s in JSON format, yes?

    Thanks in advance for your help!

  • Trevor Saint says:

    Very clear and helpful article. Thank you.

  • Vashanti says:

    I highly agree with the previous commented….I have been searching for a way to work with this file and this is the simplest and easiest explanation i’ve seen. This gave me what I needed to first understand and continue with what i needed to do…if that makes any sense… Thank you

  • Dylan says:

    I don’t normally comment on these sites, but this time is an exception.

    Thank you so much for this article. Everything that I needed to know in one place … perfect!