How to Add/Append Data to JSON File using PHP

Submitted by: 
Language: 
Visitors have accessed this post 995 times.

Getting Started

I've used Bootstrap in this tutorial which is a CSS framework and is included in the downloadable of this tutorial but if you want, you may download Bootstrap using this link.

Also, take note that I'll be using members.json that I have included in the downloadable of this tutorial.

Displaying our JSON Data

Next, we display the existing data in our JSON file and create the add/append form as well. Create a new file, name it as index.php and paste the codes below.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>How to Add/Append Data to JSON File using PHP</title>
  6. <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
  7. </head>
  8. <body>
  9. <div class="container">
  10. <h1 class="page-header text-center">Add/Append Data to JSON File</h1>
  11. <div class="row">
  12. <div class="col-sm-3 col-sm-offset-1">
  13. <form method="POST" action="add.php">
  14. <div class="form-group">
  15. <label>ID</label>
  16. <input type="text" class="form-control" name="id">
  17. </div>
  18. <div class="form-group">
  19. <label>Firstname</label>
  20. <input type="text" class="form-control" name="firstname">
  21. </div>
  22. <div class="form-group">
  23. <label>Lastname</label>
  24. <input type="text" class="form-control" name="lastname">
  25. </div>
  26. <div class="form-group">
  27. <label>Address</label>
  28. <input type="text" class="form-control" name="address">
  29. </div>
  30. <div class="form-group">
  31. <label>Gender</label>
  32. <input type="text" class="form-control" name="gender">
  33. </div>
  34. <button type="submit" class="btn btn-primary" name="add">Add</button>
  35. </form>
  36. <?php
  37. if(isset($_SESSION['message'])){
  38. ?>
  39. <div class="alert alert-info text-center" style="margin-top:20px;">
  40. <?php echo $_SESSION['message']; ?>
  41. </div>
  42. <?php
  43. unset($_SESSION['message']);
  44. }
  45. ?>
  46.  
  47. </div>
  48. <div class="col-sm-7">
  49. <table class="table table-bordered table-striped">
  50. <thead>
  51. <th>ID</th>
  52. <th>Firstname</th>
  53. <th>Lastname</th>
  54. <th>Address</th>
  55. <th>Gender</th>
  56. </thead>
  57. <tbody>
  58. <?php
  59. $data = file_get_contents('members.json');
  60. $data = json_decode($data);
  61. foreach($data as $row){
  62. echo "
  63. <tr>
  64. <td>".$row->id."</td>
  65. <td>".$row->firstname."</td>
  66. <td>".$row->lastname."</td>
  67. <td>".$row->address."</td>
  68. <td>".$row->gender."</td>
  69. </tr>
  70. ";
  71. }
  72. ?>
  73. </tbody>
  74. </table>
  75. </div>
  76. </div>
  77. </div>
  78. </body>
  79. </html>

Creating our Append Script

Lastly, we create the script that adds data to our JSON file. Create a new file, name it as add.php and paste the codes below.

  1. <?php
  2. if(isset($_POST['add'])){
  3. $data = file_get_contents('members.json');
  4. $data_array = json_decode($data);
  5. //data in our POST
  6. $input = array(
  7. 'id' => $_POST['id'],
  8. 'firstname' => $_POST['firstname'],
  9. 'lastname' => $_POST['lastname'],
  10. 'address' => $_POST['address'],
  11. 'gender' => $_POST['gender']
  12. );
  13. //append the POST data
  14. $data_array[] = $input;
  15. //return to json and put contents to our file
  16. $data_array = json_encode($data_array, JSON_PRETTY_PRINT);
  17. file_put_contents('members.json', $data_array);
  18. $_SESSION['message'] = 'Data successfully appended';
  19. }
  20. else{
  21. $_SESSION['message'] = 'Fill up add form first';
  22. }
  23. header('location:index.php');
  24. ?>

That ends this tutorial. Happy Coding :)


Comments

Maybe I am not following. When you say "Append Data", do you mean existing data can be updated?

If I try to "append" updated data to record 1, the form creates a second ID 1?

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.