Storing as key value in Json Angular js

Question

This is my script File..

     app.controller('userController', function PostController($scope, userFactory) {
                $scope.users = [];
                $scope.user = { items : [] , attributes : [] };
                $scope.editMode = false;

                $scope.addItem = function (index) {

                        $scope.user.items.push({
                            Name: $scope.newItemName,
                            Value: $scope.newItemValue
                        });
                    };

                 $scope.deleteItem = function (index) {
                         $scope.user.items.splice(index, 1);
                     };

}

This is my HTML file

 <div class="modal-body">
                            <form class="form-horizontal" role="form" name="adduserform">
                                <div class="form-group">
                                    <label for="title" class="col-sm-2 control-label">Name</label>
                                    <div class="col-sm-10">
                                        <input type="text" data-ng-model="user.Name" class="form-control" id="title" placeholder="Your Name" required title="Enter your name" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="title" class="col-sm-2 control-label">Address</label>
                                    <div class="col-sm-10">
                                        <input type="text" data-ng-model="user.Address" class="form-control" id="title" placeholder="Your Address" required title="Enter your address" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="title" class="col-sm-2 control-label">ContactNo</label>
                                    <div class="col-sm-10">
                                        <input type="text" data-ng-model="user.ContactNo" class="form-control" id="title" placeholder="Your ContactNo" required title="Enter your contactno" />
                                    </div>
                                </div>

                                <div class="form-group">
                                    <ul class="nav" class="col-sm-2" >
                                        <label for="title" class="col-sm-2 control-label">Variations</label>
                                        <div class="col-sm-10">
                                             <input type="text" value="ItemName" class="form-control" id="title" ng-model="newItemName" required placeholder="Name of new item...">
                                             <input type="text" value="ItemName" class="form-control" id="title" ng-model="newItemValue" required placeholder="Value of new item...">
                                        </div>
                                        <div class="col-sm-offset-3">
                                        <button ng-click="addItem()" class="btn btn-primary" >Add Me</button>

                                            <table class="table table-hover">
                                                <tr data-ng-repeat="item in user.items">

                                                    <td>
                                                        <p>{{item.Name}}</p>

                                                    </td>
                                                    <td>
                                                        <p>{{item.Value}}</p>

                                                    </td>
                                                    <td>
                                                        <a ng-click="deleteItem($index)" class="delete-Item">x</a>
                                                    </td>
                                                </tr>
                                            </table>

                                        </div>
                                    </ul>
                                </div>

My doubt is that whenever I click addItem it will be stored as Name : "xxx", Value: "yyy", but i want it to be stored as xxx : yyy. Is there a way to do that. Im new to angular js. Please help me. Thank you

You are sending it as $scope.user.items.push({ Name: $scope.newItemName, Value: $scope.newItemValue }); Did you try doing $scope.newItemName: $scope.newItemValue instead? — Matthew Darnell
– Matthew Darnell, Commented Jun 22, 2015 at 18:55

krivtom · Accepted Answer · 2015-06-22 18:54:59Z

1

Try using this code in your addItem method:

$scope.addItem = function (index) {
    var newItem = {};
    newItem[$scope.newItemName] = $scope.newItemValue;
    $scope.user.items.push(newItem);
};

In this code you first create an object for new item, and then create the property from newItemName and assign it a value from field newItemValue. Then you push this to an array.

One issue with this approach is that your bindings like <p>{{item.Name}}</p> will not work, because there is no property called Name anymore. I don't know why you want to store the data in the format you described, but in order to make the old bindings work you could also use old properties as well:

$scope.addItem = function (index) {
    var newItem = {Name: $scope.newItemName, Value: $scope.newItemValue };
    newItem[$scope.newItemName] = $scope.newItemValue;
    $scope.user.items.push(newItem);
};

edited Jun 22, 2015 at 18:54

answered Jun 22, 2015 at 18:47

krivtom

25k10 gold badges53 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

wvdz · Accepted Answer · 2015-06-22 18:51:24Z

0

Use a map instead of a list for the items:

$scope.user = { items : {} , attributes : [] };

$scope.user.items[$scope.newItemName] = $scope.newItemValue;

answered Jun 22, 2015 at 18:51

wvdz

16.2k4 gold badges60 silver badges97 bronze badges

Collectives™ on Stack Overflow

Storing as key value in Json Angular js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related