CODEWITHSUNDEEP
javascriptjsonangularjs
user838437
user838437

Reputation: 1501

Push element into JSON object

I want to go through a JSON, if a certain condition applies then push some extra elements in that index.

I have this JS code:

$scope.addRoleToUser = function() {
    var userid = $scope.selectedUser;
    var tmpdata = [];
    var index = 0;
    //alert(userid);
    angular.forEach($scope.users, function(data) {

        if (data.id == $scope.selectedUser) {
            tmpdata.push(data,{"roles":[{"id":"00","name":"newrole"}]});
        }
        else {
            tmpdata.push(data); 
        }
        index++;
    });
    $scope.users = tmpdata; 
};

This is my initial JSON element:

$scope.users = [
                    {"id":"0","name":"User1","roles":[{}]},
                    {"id":"1","name":"User2","roles":[{}]},
                ]

I'm trying to get it to look like this after the function runs:

$scope.users = [
                    {"id":"0","name":"User1","roles":[{"id":"00","name":"newrole"}]},
                    {"id":"1","name":"User2","roles":[{}]},
                ]

But instead I'm getting this:

[{"id":"0","name":"User1","roles":[{}]},{"roles":[{"id":"00","name":"newrole"}]},{"id":"1","name":"User2","roles":[{}]}]

Upvotes: 1

Views: 1771

Answers (3)

Simon Zelazny
Simon Zelazny

Reputation: 386

The Array.prototype.push method is variadic: (https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/push).

When you call tmpdata.push(a,b,c), you are in essence appending the array [a,b,c] to tmpdata.

You can also decompose the problem with something like:

$scope.addRoleToUser = function() {
  var thisUserid = $scope.selectedUser;

  function addRolesFor(user) {
    if (user.id === thisUserId){ user.roles = [{"id":"00","name":"newrole"}] };
    return user;
  }
  retrun $scope.users.map(addRoles);
}

Please use the map function that is appropriate for your environment (like _.map), because the Array.prototype.map method is not supported by all browsers.

Upvotes: 0

Sirko
Sirko

Reputation: 74046

Inside the forEach() callback you're just working with objects and as such, you can modify them directly inside the callback:

angular.forEach($scope.users, function(data) {
    if (data.id == $scope.selectedUser) {
        data.roles = [{"id":"00","name":"newrole"}];
    }
});

Similarly you could modify almost anything of each entry by manipulating the respective data object.

Example Fiddle

Upvotes: 1

Niccolò Campolungo
Niccolò Campolungo

Reputation: 12042

Just replace this inside your function

if (data.id == $scope.selectedUser) {
    data.roles = [{"id":"00","name":"newrole"}];
}

Or, if you know that roles is not empty, you can do:

if (data.id == $scope.selectedUser) {
    data.roles.push({"id":"00","name":"newrole"});
}

And after this line you can add your data to tmpdata!

That snippet now will look like this:

if (data.id == $scope.selectedUser) {
    data.roles = [{"id":"00","name":"newrole"}]}); //or the other one
}
tmpdata.push(data);

Upvotes: 1

Related Questions