CODEWITHSUNDEEP
javascriptjqueryjson
chrisdemeke
chrisdemeke

Reputation: 333

How to Add/Append to external JSON file using jQuery

I've got a json file that I would like to build a form that will allow me to add / edit elements in the file. Is there a jQuery function/ method that will allow me to be able to post and append elements in the external json file?

Not sure if this will help but the current json structure is as follow:

 [ { "cast" : "",
    "director" : "",
    "genre" : "",
    "id" : false,
    "nrVotes" : 0,
    "plot" : "",
    "rating" : 0,
    "runtime" : 0,
    "title" : "",
    "year" : false
  },
  { "cast" : "Tim Robbins, Morgan Freeman, Bob Gunton, ",
    "director" : "Frank Darabont",
    "genre" : "Crime Drama ",
    "id" : "0111161",
    "nrVotes" : 968510,
    "plot" : "Two imprisoned men bond over a number of years, finding solace and eventual redemption through acts of common decency.",
    "rating" : 9.3000000000000007,
    "runtime" : 142,
    "title" : "The Shawshank Redemption",
    "year" : "1994"
  }]

Huge thank you in advance!! (:

Upvotes: 2

Views: 21520

Answers (2)

sudheer
sudheer

Reputation: 37

<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js" ></script>
</head>
<body>
    <?php
        $str = file_get_contents('data.json');//get contents of your json file and store it in a string
        $arr = json_decode($str, true);//decode it
         $arrne['name'] = "sadaadad";
         $arrne['password'] = "sadaadad";
         $arrne['nickname'] = "sadaadad";
         array_push( $arr['employees'], $arrne);//push contents to ur decoded array i.e $arr
         $str = json_encode($arr);
        //now send evrything to ur data.json file using folowing code
         if (json_decode($str) != null)
           {
             $file = fopen('data.json','w');
             fwrite($file, $str);
             fclose($file);
           }
           else
           {
             //  invalid JSON, handle the error 
           }

        ?>
    <form method=>
</body>

data.json

{  
  "employees":[  
  {  
     "email":"11BD1A05G9",
     "password":"INTRODUCTION TO ANALYTICS",
     "nickname":4
  },
  {  
     "email":"Betty",
     "password":"Layers",
     "nickname":4
  },
  {  
     "email":"Carl",
     "password":"Louis",
     "nickname":4
  },
  {  
     "name":"sadaadad",
     "password":"sadaadad",
     "nickname":"sadaadad"
  },
  {  
     "name":"sadaadad",
     "password":"sadaadad",
     "nickname":"sadaadad"
  },
  {  
     "name":"sadaadad",
     "password":"sadaadad",
     "nickname":"sadaadad"
  }
   ]
}

Upvotes: -1

Jason Joseph Nathan
Jason Joseph Nathan

Reputation: 7601

if you are using jQuery's getJSON or parseJSON(), you have a javascript object you can manipulate. for example:

$.getJSON( "/test.json", function( data ) {
  // now data is JSON converted to an object / array for you to use.
  alert( data[1].cast ) // Tim Robbins, Morgan Freeman, Bob Gunton

  var newMovie = {cast:'Jack Nicholson', director:...} // a new movie object

  // add a new movie to the set
  data.push(newMovie);      
});

All you have to do now is save the file. You can use jQuery.post() to send the file back to the server to save it for you.

Update: Posting an example

//inside getJSON()

var newData = JSON.stringify(data);
jQuery.post('http://example.com/saveJson.php', {
    newData: newData
}, function(response){
    // response could contain the url of the newly saved file
})

On your server, example using PHP

$updatedData = $_POST['newData'];
// please validate the data you are expecting for security
file_put_contents('path/to/thefile.json', $updatedData);
//return the url to the saved file

Upvotes: 4

Related Questions