更新AngularJS中的JSON文件

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

我从JSON文件中获得了一些数据，我在HTML中使用它首先从AngularJS获取它，如下所示：

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

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

我想在单击HTML中的按钮后更新此JSON文件：

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

In the angular controller:

在角度控制器中：

$scope.postData = function(id) {
    $http.post('js/database.json').success(function(data) {
        data[id].available = false;
    });
};

How can I do it? I can't get it working...

我该怎么做？我不能让它工作......

2 个解决方案

#1

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

您不能仅通过JavaScript（AngularJS）编写文件。

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

您将通过服务器端并将“post”请求指向服务器端脚本（即：PHP）并使该脚本完成工作。

#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.

这种事情是行不通的。您尝试写入的文件将位于服务器上;就像现在一样，它将是一个静态资源。我建议在这里阅读Angular资源。您可以设置服务器端代码以对json文件执行CRUD操作，但实际上数据库最好。如果您更喜欢使用json格式，Mongodb是您的最佳选择;这里是Mongodb大学的链接，提供免费课程。我过去做过，而且很棒。

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.

现在，对于一些实际帮助您的情况：您可以对您的json文件执行GET请求，因为它被视为静态资源。但是，POST请求需要服务器端脚本来执行任何操作。

$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:

在学习Angular的过程中，这可能会更进一步，但这里有一段Node.js服务器代码，Mongo数据库和Mongoose可以处理'Schema'，以帮助您了解其工作原理：

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.

这是一个SO页面，其中包含有关Node入门的资源列表;我推荐Node，因为它易于使用，而且它是用JS编写的。 Mongo大学课程还会设置您的服务器以便与数据库一起使用;您可以选择多种类型，例如Java，.NET，Python或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 :)

上面的示例中有一点遗漏，例如Mongoose模型和节点设置，但如果您选择阅读它们，那么我将在页面上链接到的资源中介绍这些内容。希望这可以帮助：）

#1