How to Add/Append to external JSON file using jQuery

Question

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

How are you currently getting the JSON file?

pipewrk
– pipewrk

2013-10-20 04:19:24 +00:00
Commented Oct 20, 2013 at 4:19 — pipewrk
– pipewrk, Commented Oct 20, 2013 at 4:19

pipewrk · Accepted Answer · 2015-11-14 15:29:10Z

4

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

edited Nov 14, 2015 at 15:29

answered Oct 20, 2013 at 4:27

pipewrk

7,5662 gold badges29 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

pipewrk Over a year ago

@akshaynagpal, you will post the updated json as data, not as a file. I'll update the answer

akshaynagpal Over a year ago

myServerUrl will be just the server url or /update.php has to be included?

pipewrk Over a year ago

The exact url. Obviously, if it includes update.php, then you must include it.

pipewrk Over a year ago

Please ask a new question @akshaynagpal.

akshaynagpal Over a year ago

There's already a question - stackoverflow.com/questions/31423976/…

|

sudheer · Accepted Answer · 2016-08-23 02:05:29Z

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

Collectives™ on Stack Overflow

How to Add/Append to external JSON file using jQuery

Huge thank you in advance!! (:

2 Answers 2

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Huge thank you in advance!! (:

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related