Update a JSON file in AngularJS

Question

I've got some data from a JSON file, which I use in my HTML getting it first from AngularJS like this:

$http.get('js/data.json').success(function(data) {
    $scope.data = data;
});

And I want to update this JSON file after clicking a button in the HTML:

<button ng-click="postData(id)">Post</button>

Answer 1

You cannot write on files via JavaScript only (AngularJS).

You are to go via server side and point your "post" request to a server side script (ie: PHP) and make that script do the job.

Answer 2

This sort of thing won't work. The file you are trying to write to would be on a server; and as it is right now, it would be a static resource. I'd suggest reading up on Angular resources, here . You can set up your server-side code to perform CRUD operations on the json file, but an actually database would be best. If you prefer to use a json format, Mongodb is your best choice; here is a link to Mongodb University, which offers free courses. I've done it in the past, and it's been great.

Now, for some actually help in your situation: You can perform a GET request on your json file because it's seen as a static resource. The POST request, however, needs server-side scripting to do anything.

$http.get('api/YOUR_RESOURCE').success(function(data) {
  $scope.database = data;
});

$http.post('api/YOUR_RESOURCE', {
  data_key: data_value, 
  data_key2: data_value2
}).success(function(data) { 
  data[id].available = false; 
});

This may be further ahead on your path to learning Angular, but here is a snippet of Node.js server code, with a Mongo database and Mongoose to handle the 'Schema', to help you get an idea of how this works:

var mongoose = require('mongoose'),
YOUR_RESOURCE = mongoose.model('YOUR_RESOURCE');

app.route('/api/YOUR_RESOURCE')
  // This should be your GET request; 'api/
  .get(
    // Get all docs in resource
    YOUR_RESOURCE.find().exec(function (err, data) {
      if (err) {
        return res.status(400).send({
          message: SOME_ERROR_HANDLER
        });
      } else {
        res.json(data); // return list of all docs found
      }
    });)
  // Add new doc to database
  .post(function (req, res) {
    // The keys of the object sent from your Angular app should match
    // those of the model
    var your_resource = new YOUR_RESOURCE(req.body);

    your_resource.save(function (err) {
      if (err) {
        return res.status(400).send({
          message: SOME_ERROR_HANDLER
        });
      } else {
        // returns newly created doc to Angular after successful save
        res.json(your_resource);
      }
    });
  );

Here is an SO page with a list of resources on getting started with Node; I recommend Node because of it's ease of use and the fact that it is written in JS. The Mongo University lessons also go through setting up you server for use with the database; you can choose between several flavors, such as Java, .NET, Python or Node.

There is a bit left out in the examples above, such as the Mongoose model and Node setup, but those will be covered in the resources I've linked to on the page, if you choose to read them. Hope this helps :)