Angular JSON Filter for Array of Objects

Question

I am using $http to fetch a collection of users. The raw response from the server is this...

[{"id":2,"name":"John Doe","email":"[email protected]"}]

Logging the data parameter in the success callback shows this...

[Object, each: function, eachSlice: function, all: function, any: function, collect: function…]
  0: Object
    $$hashKey: "004"
    email: "[email protected]"
    id: 2
    name: "John Doe"
    __proto__: Object
  length: 1
__proto__: Array[0]

Good enough. Looks like $http already de-serialized the raw JSON into a JavaScript object.

Next, I assign the data to a $scope variable, inside the success callback, in order to perform some debugging in the browser...

$scope.debug = data;

Now, in my view, I want to display this as pretty JSON in order to debug.

<pre>{{debug | json}}</pre>

And I get this...

"[{\"id\": 2, \"name\": \"John Doe\", \"email\": \"[email protected]\", \"$$hashKey\": \"004\"}]"

I am trying to get something like this...

[
  {
    "id": 2,
    "name": "John Doe",
    "email": "[email protected]",
    "$$hashKey": "004"
  }
]

I also tried to stringify the javascript array in the controller...

$scope.debug = JSON.stringify(data, true);

and not use the filter...

<pre>{{debug}}</pre>

but I get the same results, except the $$hashKey has been removed...

"[{\"id\": 2, \"name\": \"John Doe\", \"email\": \"[email protected]\"}]"

If I just assign the first item in the array to $scope, and use the json filter, it works fine...

$scope.debug = data[0];

In my view...

<pre>{{debug | json}}</pre>

Results in...

{
  "id": 2,
  "name": "John Doe",
  "email": "[email protected]"
}

I know there are other ways to get what I want. I am just trying to understand what is going on.

Thanks!

Thanks. I am using the console, and that works fine. But, I would like to get to the bottom of the issue rather than just working around it. I want to understand why it does not work as I would expect. Either it is working correctly, and I misunderstand how it is supposed to work, or I understand correctly how it is supposed to work, but I am doing it slightly wrong, or I understand how it is supposed to work, and am doing it correctly, but there is some bug in the filter code. Just trying to learn. — Kevin
– Kevin, Commented Oct 8, 2013 at 19:03

D.Evangelista · Accepted Answer · 2013-10-07 16:49:18Z

1

You should parse the json instead of stringify.

Try this:

$scope.debug = JSON.parse(data)

Working Fiddle

answered Oct 7, 2013 at 16:49

D.Evangelista

6,5511 gold badge28 silver badges33 bronze badges

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

1 Comment

Kevin Over a year ago

Thanks Beteraraba, I tried that, but the issue is that within the success callback for the $http get call, the json has already been parsed into a JavaScript array object.

Collectives™ on Stack Overflow

Angular JSON Filter for Array of Objects

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related