Guna Guna - 23 days ago 8
Javascript Question

How to remove extra added row for generated JSON on button click either using AngularJS or JavaScript?

I am performing few operations like

Add
and
Remove
for my two
JSON
files data.

My requirement is that I need to add respective
json names and show them
in the table and then need to generate
json
object for the
added/selected
json names on
button
click. It's working fine(that I can able to show my
json names
on UI table and can
get/generate
the json data object for my
selected/added
json names data after
button
click).

But, the issue is: after generating the json object or after clicking of
Send
button, I can see that
one row is adding extra on my UI table after clicking of Send button
,
I don't need this added extra row for my UI table
, I need only whatever I added the json names only those should be displayed in my table after clicking of
Send
button. It's happening for my two json tables.(I have two Send buttons individually, one for First JSON and other for Second JSON).

I am not sure what's the wrong here ? Please help me that to display the selected json names in table on button click, that shouldn't include one extra row adding either using
AngularJS
or
JavaScript
. Thank you in advance ! Created Plnkr.

html:

<div>
<p>First Table:</p>
<table>
<thead>
<tr>
<th>Name</th>
<th>Add</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(key, value) in myFirstJson.Testing">
<td>{{getKey(value)}}</td>
<td><button ng-click="addFirst(value)">Add</button></td>
</tr>
</tbody>
</table>
<br> <br>

<table border="1" class="table">
<thead>
<tr>
<th>Name</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(key, value) in firstJsonNames track by $index">
<td>{{getKey(value)}}</td>
<td><button ng-click="deleteFirst($index)">Delete</button></td>
</tr>
<tr ng-hide="firstJsonNames.length > 0">
<td colspan="3">
<p>No Names</p>
</td>
</tr>
</tbody>
</table>
<br>
<br>
<table>
<tbody>
<tr>
<td>First Dropdown:<select ng-model="firstJsonNames.firstdropdown">
<option value="Test1">Test1</option>
<option value="Test2">Test2</option>
<option value="Test3">Test3</option>
</select><br />
</td>
</tr>

<tr>
<td>First Input:<input type="text" maxlength="50" size="50"
ng-model="firstJsonNames.firstInput" /> <br /></td>
</tr>
</tbody>
</table>
<br>
<br>
<button ng-click="generateFirstJson()">Send</button>

<br>
<br><p>Second Table:</p>
<table>
<thead>
<tr>
<th>Name</th>
<th>Add</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(key, value) in mySecondJson.MyTest">
<td>{{value.Main.static.name}}</td>
<td><button ng-click="addSecond(value.Main.static.name)">Add</button></td>
</tr>
</tbody>
</table>
<br>
<br>

<table border="1" class="table">
<thead>
<tr>
<th>Name</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="name in secondJsonNames">
<td>{{name}}</td>
<td><button ng-click="deleteSecond(name)">Delete</button></td>
</tr>
<tr ng-hide="mySecondJson.MyTest.length">
<td colspan="3">
<p>No Names</p>
</td>
</tr>
</tbody>
</table>
<br>
<br>
<label>Enter Second Input Data:</label> <input
ng-model="secondJsonNames.SecondInput" placeholder="Input Text"><br>
<br>
<button ng-click="generateSecondJson()">Send</button>
<br>
<br>


</div>


app.js:

var app = angular.module('myApp', ['ui.router']);
app.controller('TestCtrl',function($scope, $http,$state,$stateParams,filterFilter,$rootScope) {
$rootScope.firstJsonNames = [];
$scope.secondJsonNames = [];
$scope.firstJsonNames.firstdropdown="Test1";
$scope.firstJsonNames.firstInput="1.5";

if($rootScope.myFirstJson == undefined)
{
$http.get('test.json').success(function(response) {
$rootScope.myFirstJson = response;
});
}
$scope.addFirst = function (name){
$rootScope.firstJsonNames.push(name);
console.log($rootScope.firstJsonNames);
};
$scope.deleteFirst = function (index){
$rootScope.firstJsonNames.splice(index,1);
};

$scope.getKey = function(item) {
return Object.keys(item)[0];
};
$scope.generateFirstJson = function(){
$rootScope.firstJsonNames.push({firstdropdown:$rootScope.firstJsonNames.firstdropdown, firstInput:$rootScope.firstJsonNames.firstInput});
console.log(angular.toJson($rootScope.firstJsonNames));
};

//second json
if($rootScope.mySecondJson == undefined)
{
$http.get('test1.json').success(function(response) {
$rootScope.mySecondJson = response;
});
}
$scope.addSecond = function (name){
$scope.secondJsonNames.push(name);
console.log($scope.secondJsonNames);
};
$scope.deleteSecond = function (name){
index = $scope.secondJsonNames.indexOf(name);
$scope.secondJsonNames.splice(index,1);
};

$scope.generateSecondJson = function(){
$scope.secondJsonNames.push({SecondInput:$scope.secondJsonNames.SecondInput});
console.log(angular.toJson($scope.secondJsonNames));
};
});
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'main.html',
controller: 'TestCtrl',
});
});

Answer

You are updating $rootScope.firstJsonNames and $scope.secondJsonNames, which are used in ng-repeat, So values are displaying in table. Use new variable for json creation.

For you are reference:

I have used

$scope.newjson2 = [];
      $scope.newjson1 = [];

Plunker http://plnkr.co/edit/r0VTaaT2rcfkiBNqyRmt?p=preview

JS:

var app = angular.module('myApp', ['ui.router']);
    app.controller('TestCtrl',function($scope, $http,$state,$stateParams,filterFilter,$rootScope) {
      $rootScope.firstJsonNames = [];
      $scope.secondJsonNames = [];
      $scope.firstJsonNames.firstdropdown="Test1";
      $scope.firstJsonNames.firstInput="1.5";
      $scope.newjson2 = [];
      $scope.newjson1 = [];

        if($rootScope.myFirstJson == undefined)
        {
            $http.get('test.json').success(function(response) {
                $rootScope.myFirstJson = response;
            });
        }    
          $scope.addFirst = function (name){
            $rootScope.firstJsonNames.push(name);
            console.log($rootScope.firstJsonNames);
          };
           $scope.deleteFirst = function (index){
            $rootScope.firstJsonNames.splice(index,1);
          };

        $scope.getKey = function(item) {
            return Object.keys(item)[0];
          };
        $scope.generateFirstJson = function(){
           $scope.newjson1 = angular.copy($rootScope.firstJsonNames);
            $scope.newjson1.push({firstdropdown:$scope.firstJsonNames.firstdropdown, firstInput:$scope.firstJsonNames.firstInput});
          console.log(angular.toJson( $scope.newjson1));
       };

        //second json
          if($rootScope.mySecondJson == undefined)
        {
            $http.get('test1.json').success(function(response) {
                $rootScope.mySecondJson = response;
            });
        }
        $scope.addSecond = function (name){
            $scope.secondJsonNames.push(name);
            console.log($scope.secondJsonNames);
          };
           $scope.deleteSecond = function (name){
             index = $scope.secondJsonNames.indexOf(name);
             $scope.secondJsonNames.splice(index,1);
          };

        $scope.generateSecondJson = function(){
          $scope.newjson2 = angular.copy($scope.secondJsonNames);
          $scope.newjson2.push({SecondInput:$scope.secondJsonNames.SecondInput});
          console.log(angular.toJson($scope.newjson2));
        };
    });
   app.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/home');
    $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'main.html',
            controller: 'TestCtrl',
        });
  });
Comments