Awesome Way To Extract JSON File with PHP

Extracting contents from a file is a common way for fetching data. In this article, you will learn on how you could possibly display a posts from a JSON file. First thing is we will read the JSON file by using the PHP function file_get_contents(). Next, we will need to parse the JSON formatted data to a PHP Object format. Lastly, we will display it using HTML.



Here's the sample JSON file contents below:

posts.json

{
    "result": {
        "title": "Extract JSON File Contents with PHP",
  "posts": [
            {
                "title": "Sample Title A",
    "img": "1.jpg",
    "link": "http://example.com/title-a"
            },
            {
                "title": "Sample Title B",
    "img": "2.jpg",
    "link": "http://example.com/title-b"
            },
            {
                "title": "Sample Title C",
                "img": "3.jpg",
                "link": "http://example.com/title-c"
            },
            {
                "title": "Sample Title D",
                "img": "4.png",
                "link": "http://example.com/title-d"
            }
        ]
    }
}

The above code is a sample of a JSON format data which we will be extracting.

Parsing the JSON File

Using PHP's file_get_contents(), we could be able to parse posts.json's contents. This functions returns the JSON format as a string. For us to able to manipulate its content, we must convert this string to a JSON object so we can easily read and loop its contents using PHP.  

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

As you noticed on the above code, we used json_decode() function to convert the JSON text to PHP JSON object. In this way, we could easily loop its contents and display each posts. 

Displaying Post Contents

On this stage, we'll going to create a file named index.php to display our posts.

 

 


Parsing JSON file in an Awesome Way with PHP!

Display content from Json file
 

 echo '
';
  foreach ($posts as $post) {
   echo '
';
    echo ';
     echo '

'.$post->title.'
';
     echo '';
    echo '';
   echo '
';
  }
 echo '
';

Adding Styles

Below will be our CSS file content for styling the posts display: 

 * {
  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: "";
 }

We'll that's it fella! Now we have created a PHP code that will display the json file content.

<a href="https://icons8.com/icon/50024/JSON">Json icon credits</a>