CODEWITHSUNDEEP
javascriptangularjsarraysjson
Prashanth Harish
Prashanth Harish

Reputation: 178

How to format JSON data within controller

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?

Upvotes: 0

Views: 854

Answers (6)

Daniel Cooke
Daniel Cooke

Reputation: 1634

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);

Upvotes: 0

tanmay
tanmay

Reputation: 7911

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.

Upvotes: 4

Saurabh Agrawal
Saurabh Agrawal

Reputation: 7739

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>

Upvotes: 1

Saurabh Tiwari
Saurabh Tiwari

Reputation: 5141

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

Upvotes: 0

HGrover
HGrover

Reputation: 225

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

Upvotes: 0

rpadovani
rpadovani

Reputation: 7360

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)

Upvotes: 3

Related Questions