current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote -1 down vote favorite

I have the json file:

test.json: 

{
    "MyTest": [{
        "Main": {
            "static": {
                "name": "TestName1"
            },
            "dynamic": {
            "testkey01": "testkey01data",
            "testkey02": 40,
            "testkey03vals": [1, 1, 1]
        }}
    }, {
        "Main": {
            "static": {
                "name": "TestName2"
            },"dynamic": {
            "testkey01": "test01value",
            "testkey03": 10,
            "testflags": ["Test"]
        }}
    }, {
        "Main": {
            "static": {
                "name": "TestName3"
            },"dynamic": {
            "testkey01": "testkey01value for TestName3",
            "testnumber": 30
        }}
    }]
}

I wanted to perform Add, Edit/Update and Delete operations on this json data using AngularJS.

I have done the following:

index.html:

<!DOCTYPE html>
    <html>
      <head>
       <script data-require="[email protected]" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
       <script src="app.js"></script> 
      </head>
      <body ng-app="myApp">
        <div ng-controller="TestCtrl">
            <table>
              <thead>
                <tr>
                  <th>Name</th>
                  <th>Edit</th>
                  <th>Add</th>
                </tr>
              </thead>
              <tbody>
                <tr ng-repeat="(key, value) in myTestJson.MyTest" >
                  <td>{{value.Main.static.name}} </td>
                  <td><a ng-href="editName.html">Edit</a></td>
                  <td><button id="button1"  ng-click="add(value.Main.static.name)">Add</button></td>
                </tr>
              </tbody>
            </table>
        </div>
        <br><br>
        <br>
        <table border="1" class="table">
          <thead>
            <tr>
              <th>Name</th>
              <th>Delete</th>
            </tr>
          </thead>
          <tbody>
            <tr  ng-repeat="name in jsonNames"  >
              <td>{{name}}</td>
              <td><button id="button1" name="singlebutton" ng-click="delete(name)">Delete</button></td>
            </tr>
            <tr ng-hide="myTestJson.MyTest.length">
              <td colspan="3">
                <p>No Names</p>
              </td>
            </tr>
          </tbody>
        </table>
      </body>
    </html>

editName.html:

<!DOCTYPE html>
    <html>
      <title>Edit and Update JSON data</title>
        <div>
           <table><tbody>
                <tr ng-repeat="(key, value) in myTestJson.MyTest.Main.dynamic" >
                  <td><label>{{key}}: </label> 
            <input placeholder="" type="text" ng-model="value">
                   </td>
                    </tr>
                </tbody>
            </table>
            <button value="Update and Save" id="saveButtonId" ng-href="index.html" ng-click="finishEdit">Update/Save</button>
        </div>
    </html>

app.js:

var app = angular.module('myApp', []);
app.controller('TestCtrl',function($scope, $http ) {
     $http.get('test.json').success(function(response) {
        $scope.myTestJson = response;
       // console.log(JSON.stringify(response));

      $scope.add = function (){
        alert("add is called");
        //$scope.myTestJson.push($scope.jsonNames);
        $scope.myTestJson.push($scope.myTestJson, jsonNames);
      };
       $scope.delete = function (index){
        $scope.myTestJson.splice(index,1);
        alert("JSON Name is deleted");
      }
     $scope.saveUpdate = function (index) {
            $scope.myTestJson[index] = $scope.dynamiceditedModel;
            $scope.edited = -1;
        };
        //$scope.dynamiceditedModel=$scope.myTestJson;
    });
  });

a. If I click on Add button: then respective JSON Name data should be added in my second table.

b. If I click on Edit button: then respective selected JSON Name "dynamic" field options should be editable (on editName.html) and then should be saved on clicking of Update/Save button(and then it should be redirected to index.html).

c. If I click on Delete button: then respective JSON Name should be deleted.

I have created Plnkr. I request you all please help me regarding this how can I perform these operations. Thanks in advance.

share|improve this question
    
I bet there is a way how to parse and edit files with JS, however this is not regular way how you wanna use Angular. Usually you just get data from JSON and store it in some variabile which can work with:) – Andurit 36 mins ago
    
@Andurit, thanks for your reply, yes, I am storing the json data in $scope.myTestJson only. – Dhana 32 mins ago
    
what should happen if you click add? – Sravan 21 mins ago
    
@Sravan, if Click on Add, then respective JSON Name data should be added in my second table.(for example if we click on Add for "TestName1" then "TestName1" should be added under Name column in my second table, so that "TestName1" will have it's own data(static and dynamic fields data) and I can download it. – Dhana 10 mins ago
    
You just need to display the name in the second table when clicked on add? – Sravan 7 mins ago
up vote 0 down vote

You have billion of mistakes there. You should definitly start with something really basic and try it one by one :). We all learn and it take time to practice so don't take it wrong.

I fixed your add / delete mistakes and you can find working example of it in here

http://plnkr.co/edit/fPjll5WqgrWCR00TUoaK?p=preview

To be more specific what did I change:

var app = angular.module('myApp', []);
    app.controller('TestCtrl',function($scope, $http ) {
      // created new scope variabile
      $scope.table2 = [];
         $http.get('test.json').success(function(response) {
            // removed functions from this scopes, there is no reason for it
            $scope.myTestJson = response;
         });

          $scope.add = function (name){   
            // giving argument to this function
            // pushing it to new variabile instead of old one
            $scope.table2.push(name);
          };
           $scope.delete = function (name){
             // argument name you was sending was just name
             // you need to find index of it in array
             index = $scope.table2.indexOf(name);
             // and then splice it
             $scope.table2.splice(index,1);
          }
          $scope.saveUpdate = function (index) {
                // I didnt get to this..
                $scope.myTestJson[index] = $scope.dynamiceditedModel;
                $scope.edited = -1;
            };            
      });

In html i changed this:

  // You had whole second table out of any controller
  <body ng-app="myApp" ng-controller="TestCtrl">
share

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.