Получить и обновить json с помощью angular.js

Question

Я очень новичок в angular.js, и у меня возникают проблемы с кажущейся простой задачей.

Мне нужно получить json ниже из json-файла на веб-сайте, затем поместить ключи (английские, испанские и т. Д.) Внутри тегов меток в свой html-файл, а затем загрузить их соответствующие значения (0, 1, 3 , 2, 1) в входы html диапазона.

Файл JSON содержит:

[{"english":0,"spanish":1,"german":3,"russian":2,"korean":1}] 

HTML, произведенный после загрузки JSON должен выглядеть следующим образом:

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

Наконец, я хочу попасть Сохранить в форме и имеют значения для соответствующих ключи, обновленные в json-файле в Интернете.

Какие файлы необходимы (с использованием MVC) для создания этого примера? Если ваш ответ включает какой-либо код, можете ли вы явно указать, к какому файлу добавить код?

Заранее благодарен!

Answer 1

Для чего вам нужно начать. Я изменил ваш json на то, что, я считаю, более уместно, но вы можете изменить его для своих целей, если хотите. Если вы используете json, у вас будет проблема с дублированием значений ng-repeat, и вам нужно будет использовать track by $index, чтобы исправить это. См. this post (click).

Live demo here (click).

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); 
    }; 
}); 

Вы хотите, чтобы прочитать информацию в this post (click), если вы хотите, чтобы избежать обертывания разметки дополнительных дел.

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

Answer 2

Вы не можете изменять файлы на сервере, $http.post не работает таким образом.

Answer 3

Вы не можете использовать $ http.post в угловом для сохранения. Клиентский код не может и не должен сохраняться на сервере. Вы можете себе представить, насколько это было бы опасно.

Вместо этого вы можете настроить NodeJS/Express (или что-то еще), чтобы принимать данные JSON в $ http.post. Затем вы можете записать данные в файл с использованием серверной платформы. Однако я бы рекомендовал не сохранять данные в файл .json на сервере. Я делаю файлы .json доступными только для чтения и в основном используется для заполнения статических переменных. Вы должны посмотреть на хранение этих типов документов в хранилище документов, например CouchDB или MongoDB.