manipulating JSON object in angular

Question

I am using angular and I am using $http.get to get a JSON response back and I set it equal to $scope.myObjects .

When I use ng-repeat="object in myObjects" in the html, it works.

I wanted to know, is there a way to manipulate these objects? I want to create a property called myBoolean and for each object in myObject set myBoolean to true.

When trying to manipulate this object in the controller by doing something like: $scope.myObjects.something I get myObjects is undefined

when I try to view the JSON response in the browser all I see is [object Object]. Is there a tool to view the JSON response?

EDIT: here is my html

<div class="comment" ng-hide="loading" ng-repeat="comment in comments">
    <h3>Comment <% comment.id %> <small>by <% comment.author %></h3>
    <p><% comment.text %></p>
    <div class="col-sm-6">
        <p><a href="#" ng-click="deleteComment(comment.id)" class="text-muted">Delete</a></p>
    </div>
</div>

here is my controller

angular.module('mainCtrl', [])


.controller('mainController', function($scope, $http, Comment) {

$scope.commentData = {};


$scope.loading = true;


Comment.get()
    .success(function(data) {
        $scope.comments = data;
        $scope.loading = false;
    });
});

and my service

angular.module('commentService', [])

.factory('Comment', function($http) {

return {
    // get all the comments
    get : function() {
        return $http.get('/api/comments');
    },
});

When I do document.write("<p>" +$http.get('/api/comments') + "</p>"); I get [object Object]. Also as I wrote in the html when I iterate through the object, i can see it works. Is there a better way than document write? sorry, i'm new at this — user3494047
– user3494047, Commented Jan 4, 2016 at 12:17

Chanthu · Accepted Answer · 2016-01-04 12:16:50Z

3

That's because $scope.myObjects is an array (i.e []) , not an object (i.e {}).

So, you would have to loop through the array and access the elements inside them one by one.

angular.forEach($scope.myObjects, function(myObject){
    myObject.myBoolean = true;
});

console.log($scope.myObjects);

answered Jan 4, 2016 at 12:16

Chanthu

1,7941 gold badge15 silver badges23 bronze badges

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

3 Comments

user3494047 Over a year ago

Where do I do this? For example plnkr.co/edit/Wuc6M7?p=preview here. If I put your code directly after the $http.get call in the controller, it doesn't work

Chanthu Over a year ago

Try this: plnkr.co/edit/JaOmApdtauNyRWqQO65U?p=preview Uses $scope.todos instead of $scope.myObjects

user3494047 Over a year ago

I tried with todos as well. I tried it after the get method was done though. Thanks

Mohammad Umair Khan · Accepted Answer · 2016-01-04 12:17:50Z

2

$scope.myObjects is actually an array. So to manipulate items present in this scoped variable, you need to iterate it using a loop. For example:

for (index  = 0; index < $scope.myObjects.length; index++) {
  $scope.myObjects[index].myBoolean = yourValue;
}

answered Jan 4, 2016 at 12:17

Mohammad Umair Khan

4206 silver badges15 bronze badges

Comments

Ivar · Accepted Answer · 2016-01-04 14:03:49Z

1

ng-repeat can repeat a list of items like an array of items/objects of items, but not an Object.

If we do like this:

$scope.myObjects.something = myBoolean;

it will override the collection so ng-repeat will fail.

Use it like this

Comment.get()
 .success(function(data) {
     $scope.comments = data;
     angular.forEach($scope.comments, function(comment) {
         comment.canEdit = true; // hear we will get each comment so we can set property and value to each commnent
     });
     $scope.loading = false;
 });

edited Jan 4, 2016 at 14:03

Ivar

6,97912 gold badges58 silver badges69 bronze badges

answered Jan 4, 2016 at 12:55

nmanikiran

3,1981 gold badge18 silver badges21 bronze badges

Collectives™ on Stack Overflow

manipulating JSON object in angular

3 Answers 3

3 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Related