Как обрабатывать json и возвращать новый json

Question

Что я пытаюсь сделать, это угловое приложение, которое читает в json-файле и отображает их, и позволяет пользователям редактировать json-файл с помощью элементов управления html. Затем пользователь может создать новый объект json на основе их выбора и отобразить его.

Вот фотография, чтобы помочь описать то, что я пытаюсь сделать:

Таким образом, пользователь видит это, они делают определенные выборы, например, заблокировать их или удалить их, затем они нажмут на создание, и новый json-файл будет возвращен на основе того, какие объекты они выбрали для блокировки или удаления.

В настоящее время у меня есть только стандартное угловое приложение, которое получает и отображает JSON:

var app = angular.module('myApp', []); 
app.controller('customersCtrl', function($scope, $http) { 
    $http.get("http://www.w3schools.com/angular/customers.php").then(function (response) { 
     $scope.myData = response.data.records; 
    }); 

    $scope.createJson = function(){ 
    // Create new json file 
    }; 
}); 

Тело моего HTML/мое угловое приложение выглядит, как это в данный момент:

<div ng-app="myApp" ng-controller="customersCtrl"> 

<table> 
    <tr ng-repeat="x in myData"> 
    <td>{{ x.Name }}</td> 
    <td>{{ x.City }}</td> 
    <td>{{ x.Country }}</td> 
    <td><input type="checkbox" name="lock" value="{{x.Name}}"></td> 
    <td><input type="checkbox" name="delete" value="{{x.Name}}"></td> 
    </tr> 
</table> 

<button ng-click="createJson()">Create</button> 

</div> 

В явном виде, я не уверен, что мой подход в данный момент правильный, и если да, то я действительно не знаю, каким должен быть мой следующий шаг.

P.S. это только данные теста я использую для обучения/тестирования, это не мои данные, я получил его от: http://www.w3schools.com/angular/customers.php

Answer 1

я в конечном итоге создание соответствующего решения, просто создавая новый и пустой объект JSON:

var newJson = []; 

и заселение его перекручивание через мой оригинал и используя Array.push(), чтобы добавить выбранные записи:

for (var person in $scope.myData){ 
    if($scope.myData[person].Delete === false || $scope.myData[person].Lock === true){ 
    newJson.push($scope.myData[person]) 
    } 
} 

Answer 2

Вы можете попробовать

JSON.stringify($scope.myData) 

или

angular.toJson($scope.myData) 

это даст вам строковое представление вашего объекта данных. Остальное зависит от вас, вы можете назначить его на текстовое поле, отправить его обратно на сервер (в данном случае, вы, скорее всего, не будет даже нужно кодировать его раньше) и т.д.

Answer 3

Вы должны использовать

<td><input type="checkbox" name="lock" value="{{x.Name}}"></td> 
<td><input type="checkbox" name="delete" value="{{x.Name}}"></td> 

в

<td><input type="checkbox" name="lock" ng-model="x.Name"></td> 
<td><input type="checkbox" name="delete" ng-model="x.Name"></td> 

(на самом деле я не понимаю, почему вы используете строку в окошке. Это должно быть логическое значение).

Таким образом, любое изменение изменит ваши $ scope.myData.

На создании вы должны принять данные от пользователя и создать новый JSONObject как

var newObject = { 
    Name: 'Name Surname', 
    City: 'City', 
    Country: 'Country' 
} 

И добавить к вашему MyData с;

$scope.myData.push(newObject);