使用 angular.js 获取和更新 json
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19968099/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get and update json using angular.js
提问by roscioli
I am very new to angular.js and am having some trouble with a seemingly simple task.
我对 angular.js 非常陌生，并且在处理看似简单的任务时遇到了一些麻烦。
I need to get the json below from a json file on a website, then place the keys (english, spanish, etc.) inside label tags in my html file, then load their corresponding values (0, 1, 3, 2, 1) into html range inputs.
我需要从网站上的 json 文件中获取下面的 json，然后将键（英语、西班牙语等）放在我的 html 文件中的标签标签内，然后加载它们对应的值（0、1、3、2、1 ) 到 html 范围输入。
The json file contains:
json 文件包含：
[{"english":0,"spanish":1,"german":3,"russian":2,"korean":1}]
The html produced after loading the json should look like:
加载 json 后生成的 html 应如下所示：
<form>
<label>English</label>
<input type="range" min="0" max="4" value="ENGLISH_VALUE_RETRIEVED_FROM_JSON_FILE" >
<label>Spanish</label>
<input type="range" min="0" max="4" value="SPANISH_VALUE_RETRIEVED_FROM_JSON_FILE" >
<label>German</label>
<input type="range" min="0" max="4" value="GERMAN_VALUE_RETRIEVED_FROM_JSON_FILE" >
<label>Russian</label>
<input type="range" min="0" max="4" value="RUSSIAN_VALUE_RETRIEVED_FROM_JSON_FILE" >
<label>Korean</label>
<input type="range" min="0" max="4" value="KOREAN_VALUE_RETRIEVED_FROM_JSON_FILE" >
<input type="submit" text="Save">
</form>
Finally I want to hit Save on the form and have the values for the corresponding keys updated on the json file online.
最后，我想点击表单上的保存并在线更新 json 文件中相应键的值。
What are all the files necessary (using MVC) to build this example? If your answer involves any code, can you please explicitly say which file to add the code to?
构建此示例所需的所有文件（使用 MVC）是什么？如果您的回答涉及任何代码，能否请您明确说明要将代码添加到哪个文件？
Thanks in advance!
提前致谢！
回答by m59
Here's something to get you started. I changed your json to something that I believe is more appropriate, but you can change it back for your purposes if you wish. If you do use your json, you'll have a problem with ng-repeat finding duplicate values and you'll need to use track by $indexto fix it. See this post (click).
这里有一些东西可以让你开始。我将您的 json 更改为我认为更合适的内容，但是如果您愿意，您可以将其更改回您的目的。如果您确实使用了 json，则 ng-repeat 查找重复值时会出现问题，您需要使用track by $index它来修复它。看到这个帖子（点击）。
var app = angular.module('myApp', []);
/* $http ajax calls really belongs in a service,
but I'll be using them inside the controller for this demo */
app.controller('myCtrl', function($scope, $http) {
/*$http.get('path/to/json').then(function(data) {
$scope.languages = data;
});*/
//inputting json directly for this example
$scope.languages = [
{name:"English", value:0},
{name:"Spanish", value:1},
{name:"German", value:3},
{name:"Russian", value:2},
{name:"Korean", value:1}
];
$scope.save = function() {
/*$http.post('path/to/server/file/to/save/json', $scope.languages).then(function(data) {
$scope.msg = 'Data saved';
});*/
$scope.msg = 'Data sent: '+ JSON.stringify($scope.languages);
};
});
You'll want to read the information in this post (click)if you want to avoid wrapping your markup in an extra div.
如果您想避免将标记包装在额外的 div 中，您需要阅读这篇文章中的信息（单击）。
<form>
<div ng-repeat="lang in languages">
<label>{{lang.name}}</label>
<input type="range" min="0" max="4" ng-model="lang.value" >
</div>
<button ng-click="save()">Save</button>
<p>{{msg}}</p>
</form>
回答by eDriven_Levar
You can not use $http.post in angular to save. Client side code can not and should not save to the server. You can imagine how DANGEROUS this would be.
您不能在 angular 中使用 $http.post 进行保存。客户端代码不能也不应该保存到服务器。你可以想象这将是多么危险。
Instead... you can setup a NodeJS/Express (or whatever) to accept the JSON data in an $http.post. Then you can write the data to a file using a server-side platform. However, I would recommend not saving data to a .json file on the server. I make my .json files read-only and mainly used to populate static variables. You should look into storing these types of documents in a document store like CouchDB or MongoDB.
相反……您可以设置一个 NodeJS/Express（或其他）来接受 $http.post 中的 JSON 数据。然后，您可以使用服务器端平台将数据写入文件。但是，我建议不要将数据保存到服务器上的 .json 文件中。我将我的 .json 文件设为只读，主要用于填充静态变量。您应该考虑将这些类型的文档存储在 CouchDB 或 MongoDB 等文档存储中。
回答by Bitzu
You can't modify files on the server, $http.postdoesn't work that way.
您不能修改服务器上的文件，$http.post不能那样工作。
