How to parse JSON file with PHP

How to parse JSON file with PHP

Want to consume an API like Facebook api, Twitter api or any other webservice, so you probably need to know how to parse a JSON file with PHP. Parsing a JSON file is too easy, just follow this tutorial step by step.

Download source code

In this tutorial I’ll show you how to read, parse and display content from a json file like a json api.

1. JSON sample

This is an example of JSON file.

{
    "result": {
        "title": "How to parse JSON file with PHP",
		"posts": [
            {
                "title": "How to Create an RSS Feed with PHP and MySQL",
				"img": "http://www.bewebdeveloper.com/images/uploads/how-to-create-an-rss-feed-with-php-and-mysql.jpg",
				"link": "http://www.bewebdeveloper.com/tutorial-about-how-to-create-an-rss-feed-with-php-and-mysql"
            },
            {
                "title": "Crop photo using PHP and jQuery",
				"img": "http://www.bewebdeveloper.com/images/uploads/crop-photo-using-php-and-jquery.jpg",
				"link": "http://www.bewebdeveloper.com/tutorial-about-crop-photo-using-php-and-jquery"
            },
            {
                "title": "Using Ajax with PHP/MySQL",
                "img": "http://www.bewebdeveloper.com/images/uploads/using-ajax-with-php-mysql.jpg",
                "link": "http://www.bewebdeveloper.com/tutorial-about-using-ajax-with-phpmysql"
            },
            {
                "title": "Using Ajax with native JavaScript",
                "img": "http://www.bewebdeveloper.com/images/uploads/using-ajax-with-native-javascript.jpg",
                "link": "http://www.bewebdeveloper.com/tutorial-about-using-ajax-with-native-javascript"
            }
        ]
    }
}

2. Basic parsing of a JSON file

Here is a basic example of parsing a json file. You change the “posts.json” by the full url, ex: http://www.domain.tld/posts.php?format=json

<?php
// copy file content into a string var
$json_file = file_get_contents('posts.json');
// convert the string to a json object
$jfo = json_decode($json_file);
// read the title value
$title = $jfo->result->title;
// copy the posts array to a php var
$posts = $jfo->result->posts;
// listing posts
foreach ($posts as $post) {
    echo $post->title;
}
?>

3. Files

index.php

This is the main file, it will be displayed on the first view

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>How to parse JSON file with PHP</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="container">
<div class="header">
<img src="images/BeWebDeveloper.png" />
</div><!-- header -->
<h1 class="main_title">How to parse JSON file with PHP</h1>
<div class="content">
<a href="json.php" class="button_json">Display content from Json file</a>
</div><!-- content -->
<div class="footer">
Powered by <a href="http://www.bewebdeveloper.com">bewebdeveloper.com</a>
</div><!-- footer -->
</div><!-- container -->
</body>
</html>

json.php

Here w’ll parse the JSON file and display it’s content.

<?php
// copy file content into a string var
$json_file = file_get_contents('posts.json');
// convert the string to a json object
$jfo = json_decode($json_file);
// read the title value
$title = $jfo->result->title;
// copy the posts array to a php var
$posts = $jfo->result->posts;
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>How to parse JSON file with PHP</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="container">
<div class="header">
<img src="images/BeWebDeveloper.png" />
</div><!-- header -->
<h1 class="main_title"><?php echo $title; ?></h1>
<div class="content">
<ul class="ul_json clearfix">
<?php
foreach ($posts as $post) {
?>
<li>
<a href="<?php echo $post->link; ?>">
<h2><?php echo $post->title; ?></h2>
<img src="<?php echo $post->img; ?>">
</a>
</li>
<?php
} // end foreach
?>
</ul>
</div><!-- content -->
<div class="footer">
Powered by <a href="http://www.bewebdeveloper.com">bewebdeveloper.com</a>
</div><!-- footer -->
</div><!-- container -->
</body>
</html>

style.css

This is the CSS file, it contain the design styles

* {
	margin: 0;
	padding: 0;
}
body {
	padding: 10px;
	background: #eaeaea;
	text-align: center;
	font-family: arial;
	font-size: 12px;
	color: #333333;
}
.container {
	width: 1000px;
	height: auto;
	background: #ffffff;
	border: 1px solid #cccccc;
	border-radius: 10px;
	margin: auto;
	text-align: left;
}
.header {
	padding: 10px;
}
.main_title {
	background: #cccccc;
	color: #ffffff;
	padding: 10px;
	font-size: 20px;
	line-height: 20px;
}
.content {
	padding: 10px;
	min-height: 100px;
	text-align: center;
}
.footer {
	padding: 10px;
	text-align: right;
}
.footer a {
	color: #999999;
	text-decoration: none;
}
.footer a:hover {
	text-decoration: underline;
}
.button_json {
	width: 200px;
	height: 30px;
	display: block;
	text-align: center;
	background: #a3a3a3;
	border: 1px solid #808080;
	color: #ffffff;
	border-radius: 10px;
	cursor: pointer;
	margin: auto;
	margin-top: 20px;
	font-size: 14px;
	line-height: 30px;
	font-weight: bold;
	text-decoration: none;
}
.ul_json {
	margin: auto;
	padding: 10px 0 10px 10px;
}
.ul_json li {
	width: 462px;
	margin: 0 10px 10px 0;
	padding: 5px;
	list-style: none;
	text-align: left;
	background: #e1dfdf;
	border: 1px solid #cccccc;
	float: left;
}
.ul_json li a {
	text-decoration: none;
	color: #666666;
}
.ul_json li a h2 {
	font-size: 18px;
	margin: 5px 0 5px 0;
}
.ul_json li a img {
	width: 100%;
	height: 138px;
}
.clearfix:after {
    clear: both;
    display: block;
    content: "";
}
JSON, Json Api, Parse JSON file, PHP
comments powered by Disqus

Social Profiles

bewebdeveloper on facebook bewebdeveloper on twitter bewebdeveloper on google plus bewebdeveloper on vk bewebdeveloper on youtube bewebdeveloper on tumblr bewebdeveloper rss

Subscribe to our Newsletter

Facebook

Twitter

Google+

HTML Tutorials
CSS Tutorials

Advertising