简体   繁体   中英

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!! (:

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
<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"
  }
   ]
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM