AngularJS: How to get the key of a JSON Object

I am unsure if this has got anything to do with AngularJS at all and if it is only JSON related.

Anyhow, let us say that we have the following JSON:

$scope.dataSets = {
    "names": ["Horace", "Slughorn", "Severus", "Snape"],
    "genders": ["Male", "Female"]
}

Now, I am using the ng-repeat directive to print the above as follows:

<div ng-repeat="data in dataSets>
    //Continue readig to know what I am expcting here
</div>

What I expect within the <div></div> tags is to print "name" and "genders". That is, I wish to print the keys of the JSON. I have no idea what the keys are, as in they could be anything. How can I do this?

Solution 1:

As docs state it:

(key, value) in expression – where key and value can be any user defined identifiers, and expression is the scope expression giving the collection to enumerate.

<div ng-repeat="(key, data) in dataSets">
  {{key}}
</div>

Solution 2:

for accessing Json key-value pair from inside controller in AngularJs.

for(var keyName in $scope.dataSets){        
     var key=keyName ;
     var value= $scope.dataSets[keyName ];

  alert(key)
  alert(JSON.stringify(value));

}

Solution 3:

if dataSets is an array and not an object you first need to ng-repeat the array items and then the key or value.

<div ng-repeat="item in dataSets">
   <div ng-repeat="(key, value) in item">
   {{key}}
   {{value}}
   </div>
</div>

just my 2 cents.

Solution 4:

For every dataSet in dataSets, print the key and then iterate through the individual items:

<div ng-repeat="(key, dataSet) in dataSets">
   <div>{{key}}</div>
   <div ng-repeat="value in dataSet">   
        {{value}}
   </div>
</div>

{{dataset}} can be displayed in one go also, the array would be displayed as a comma separated list of values.