(Angular) insert an object to json array

Question

I am trying to add new item to roleList json array. I have tried push / concat but it does not change the roleList array. Any way to solve the issue?

// The javascript :

function RoleListCtrl($scope)
{
    $('#myTab a[href="#role"]').tab('show');

    $scope.newCompanyName ="";
    $scope.newPosition="";


    $scope.addRole = function()
    {
        var newRole = new function() {
            this.companyName = $scope.newCompanyName;
            this.position    = $scope.newPosition;
            this.id          = '';
        }

        alert("test :"+newRole.companyName);

        $scope.roleList = $scope.roleList.push(newRole);
        // I have also tried this :   $scope.roleList = $scope.roleList.concat(newRole);
    }

    $scope.roleList = [
        {"companyName": "Company 01", "id":"1", "position": "CEO"},
        {"companyName": "Company 02", "id":"2", "position": "Board of Director"},
        {"companyName": "Company 01", "id":"1", "position": "CEO"},
        {"companyName": "Company 02", "id":"2", "position": "Board of Director"}

    ];
}

Below is the button that called the addRole() :

<form class="form-horizontal">
<div id="myModal" class="modal hide fade" ng-controller="RoleListCtrl">

    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Add Role</h3>
    </div>

    <div class="modal-body">

        <div class="control-group">
            <label class="control-label pull-left" for="name">Company Name</label>
            <div class="controls">
                <input type="text" id="coyName" ng-model="newCompanyName" placeholder="Company Name">
            </div>
        </div>

        <div class="control-group">
            <label class="control-label pull-left" for="name">Role</label>
            <div class="controls">
                <input type="text" id="newRole" ng-model="newPosition" placeholder="Role">
            </div>
        </div>

    </div>

    <div class="modal-footer">
        <a href="#" class="btn">Close</a>
        <a href="#" class="btn btn-primary" ng-click="addRole()">Save changes</a>
    </div>

</div>
</form>

<div class="tab-pane" id="role" ng-controller="RoleListCtrl">

                    <a class="btn btn-primary" data-toggle="modal" data-target="#myModal"><i class="icon-plus icon-white"></i>Add New Role</a>
                    <BR>

                    <table class="table table-bordered table-white spacer5">
                        <tr>
                            <th>company name</th>
                            <th>position</th>
                            <th>action</th>
                        </tr>

                        <tr ng-repeat="eachRole in roleList">
                            <td>{{eachRole.companyName}}</td>
                            <td>{{eachRole.position}}</td>
                            <td>
                                <button ng-click="deleteRole($index)">delete</button>
                            </td>
                        </tr>

                    </table>
                    <BR>

                </div>

I highly doubt you can invoke it that way - there is no global addRole() function defined. — zerkms
– zerkms, Commented Jul 2, 2013 at 2:40
it uses angular... if the alert shown, definitely it is invoked. the problem is only in the adding to the json, I assured you. — Rudy
– Rudy, Commented Jul 2, 2013 at 2:42

kalley · Accepted Answer · 2013-07-02 02:43:46Z

17

This line is your problem:

$scope.roleList = $scope.roleList.push(newRole);

When you call push, it return the length (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push). You're essentially pushing the new Role into it and then replacing roleList with the length of the array, losing the array.

answered Jul 2, 2013 at 2:43

kalley

18.5k2 gold badges41 silver badges37 bronze badges

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

4 Comments

CME64 Over a year ago

that's logical, I think this is the issue here

Rudy Over a year ago

ok. I have tried your suggestion and I have noticed that actually the roleList is changed. However it does not reflected in the ng-repeat. the issue is more to angular binding - because it does not reflected in the UI, but still not sure what caused it.

kalley Over a year ago

I don't know enough about Angular to even start debugging that. But I did make this fiddle that might help later: jsfiddle.net/J7BYD. I changed .tab to .tabs because I don't know what plugin you're using.

Rudy Over a year ago

+1 I have solved the issue. I created 2 of ng-controller="RoleListCtrl", which cause the angular framework loses the hold of the scope. should just wrap the popup and the thing with the same controller. On the top of that, I have the issue that you pointed out. Thanks for your help!

Treeskar · Accepted Answer · 2013-07-22 15:36:41Z

2

var currentList = $scope.roleList;
var newList = currentList.concat(newRoleArray);
$scope.roleList = newList;

answered Jul 22, 2013 at 15:36

Treeskar

6166 silver badges6 bronze badges

1 Comment

Holland Risley Over a year ago

This works for me :) Just wondering, how can I add the new object to the beginning instead of the end of the list of objects?

Sujeet Singh · Accepted Answer · 2017-04-11 09:16:22Z

0

you can directly push your object by making object with key value pair.

$scope.addRole = function(){
var newRole = {
    "companyName":$scope.newCompanyName,
    "id":"",
    "position":$scope.newPosition
 }
$scope.roleList.push(newRole);
}

answered Apr 11, 2017 at 9:16

Sujeet Singh

1

Collectives™ on Stack Overflow

(Angular) insert an object to json array

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related