How to format JSON data within controller

Question

I'm new to AngularJS and JSON. I'm stuck in this stage where I want to filter unnecessary fields in the JSON.

I used code in my controller :

var data = $scope.choices; // Is an array
var datav = (JSON.stringify(data)); // array converted into a string need to be filtered
alert(datav);

If I alert(datav) am getting JSON data which mentioned below.

[{"title":"g","$$hashKey":"object:3"},{"id":"choice2","$$hashKey":"object:6","title":"ghgh"},{"id":"choice3","$$hashKey":"object:11","title":"fgh"}]

I want only "title" I don't want $$hashKey and id. How to do this?

what you tried so far? Did you tried docs.angularjs.org/guide/filter or developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…? — Arpit Srivastava
– Arpit Srivastava, Commented Apr 25, 2017 at 8:41

Community · Accepted Answer · 2020-06-20 09:12:55Z

4

You can use angular.toJson instead of JSON.stringify which would omit $$hashkey for you.

angular.toJson

Serializes input into a JSON-formatted string. Properties with leading $$ characters will be stripped since AngularJS uses this notation internally.

Like this,

var myobj = [{
  "title": "g",
  "$$hashKey": "object:3"
}, {
  "id": "choice2",
  "$$hashKey": "object:6",
  "title": "ghgh"
}, {
  "id": "choice3",
  "$$hashKey": "object:11",
  "title": "fgh"
}]

console.log(angular.toJson(myobj))
console.log(JSON.stringify(myobj))

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

Edit: In case you want to only show some property, use Array.map as described in other answers. angular.toJson would only be helpful here when you want to omit just $$hashkey retaining everything else.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 25, 2017 at 8:41

tanmay

7,9112 gold badges24 silver badges39 bronze badges

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

1 Comment

tanmay Over a year ago

@PrashanthHarish sure, I felt question a little misleading, will edit that for you. you can accept other suitable answer here

rpadovani · Accepted Answer · 2017-04-25 08:41:05Z

3

You can use Array.map() function to achieve what you want, and return only the properties you are interested in

var data = [{"title":"g","$$hashKey":"object:3"},{"id":"choice2","$$hashKey":"object:6","title":"ghgh"},{"id":"choice3","$$hashKey":"object:11","title":"fgh"}];

var datav = data.map(d => ({title: d.title}));

console.log(datav)

answered Apr 25, 2017 at 8:41

rpadovani

7,4102 gold badges34 silver badges50 bronze badges

Comments

Saurabh Agrawal · Accepted Answer · 2017-04-25 08:50:10Z

1

Try this

<html>
<head>
	<script Src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>

	<script>
		var app=angular.module("myapp", []);
		app.controller("namesctrl", function($scope){
            var data = [{"title":"g","$$hashKey":"object:3"},{"id":"choice2","$$hashKey":"object:6","title":"ghgh"},{"id":"choice3","$$hashKey":"object:11","title":"fgh"}];
            var data1 = data.map(d => ({title: d.title}));
            console.log(data1);
		});

		
	</script>


</head>
<body ng-app="myapp" ng-controller="namesctrl">

</body>
</html>

answered Apr 25, 2017 at 8:50

Saurabh Agrawal

7,7553 gold badges31 silver badges52 bronze badges

2 Comments

Saurabh Agrawal Over a year ago

what is str?? make sure its an array.

Saurabh Agrawal Over a year ago

so that's string na?? you stringified array to string.. now parse it then use .map

Daniel Cooke · Accepted Answer · 2017-04-25 09:07:49Z

0

You can use Array.prototype.map.

When you first receive your array:

 const data = [
  {title: "hello" , "unwanted" : 34},
  {title: "hello" , "unwanted" : 35},
  {title: "hello" , "unwanted" : 36},
  {title: "hello" , "unwanted" : 37},

]



const wanted = data.map( d => {
  return {title: d.title}
});

console.log(wanted);

edited Apr 25, 2017 at 9:07

answered Apr 25, 2017 at 8:44

Daniel Cooke

1,66415 silver badges27 bronze badges

2 Comments

Prashanth Harish Over a year ago

am gettin log as [undefined, undefined].

Daniel Cooke Over a year ago

@PrashanthHarish my mistake, I made a slight syntax error. have a look at this JSbin

rpadovani · Accepted Answer · 2017-04-25 08:43:54Z

0

var data = $scope.choices.map(function(index,item){
    return {id: item.id};
});

this is how you can map the desired object you need out of choices array

edited Apr 25, 2017 at 8:43

rpadovani

7,4102 gold badges34 silver badges50 bronze badges

answered Apr 25, 2017 at 8:42

HGrover

2251 silver badge10 bronze badges

2 Comments

rpadovani Over a year ago

He asked for title, not for id

HGrover Over a year ago

I gave him the idea behind the usage of map function, He can surely work out with what he needs.

Saurabh Tiwari · Accepted Answer · 2017-04-25 08:44:35Z

0

I believe you are using a third party library. My guess is Angular Material which adds a similar $$haskey property to the dropdown array values. Ideally this shouldn't make any change to your array and you should still be able to get your properties on array object.

But if you specifficaly want to remove these unwanted properties you should create a new array out of this array using a .map function. Example:

var newArray= orginalArray.map(element => ({title: element.title}));

You can take out as many properties as you want and leave unwanted properties. Your new array is a complete different reference from old array.

Hope this helps

answered Apr 25, 2017 at 8:44

Saurabh Tiwari

5,31911 gold badges52 silver badges92 bronze badges

Collectives™ on Stack Overflow

How to format JSON data within controller

6 Answers 6

`angular.toJson`

1 Comment

Comments

2 Comments

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

2 Comments

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related