Angular js. Parse json

Question

Im trying to parse this chunk of json with no good result. Below is how my json looks like. I want to be able to do ng-repeat on all attributes so that i can render for example "Content" and "Title" inside a div.

JSON:

{
    "Hits": [{
            "Content": "Lorem ipsum",
            "Id": "Lorem ipsum",
            "IllustratingImage120Url": "Lorem ipsum",
            "SearchPublishDate": "Lorem ipsum",
            "SearchUpdateDate": "Lorem ipsum",
            "Section": "Lorem ipsum",
            "Title": "Lorem ipsum",
            "Url": "Lorem ipsum"
        }, {
            "Content": "Lorem ipsum",
            "Id": "Lorem ipsum",
            "IllustratingImage120Url": "Lorem ipsum",
            "SearchPublishDate": "Lorem ipsum",
            "SearchUpdateDate": "Lorem ipsum",
            "Section": "Lorem ipsum",
            "Title": "Lorem ipsum",
            "Url": "Lorem ipsum"
        }
    }]
}

So i load the json with a service and set it to:

$scope.result = result.data;

Wich returns the josn, no problem. But i want to do ng-repeat on its attributes. But the whole json gets rendered. I only want to render the attribute "Content".

HTML:

<ul>
    <li ng-repeat="Content in result">{{ Content }}</li>
</ul>

Answer 1

Because it just json, you can access the properties like so:

<ul>
    <li ng-repeat="item in result.Hits">{{ item.Content }}</li>
</ul>

See plnk

Answer 2

Try this:

<ul>
    <li ng-repeat="r in result.Hits">{{ r.Content }}</li>
</ul>

Answer 3

try this

<ul>
  <li ng-repeat="(key,value) in result.Hits">{{ value.Content }}</li>
</ul>

 var app = angular.module("app", []); app.controller('mainCtrl', function($scope){ $scope.result = { "Hits": [ { "Content": "Lorem ipsum", "Id": "Lorem ipsum", "IllustratingImage120Url": "Lorem ipsum", "SearchPublishDate": "Lorem ipsum", "SearchUpdateDate": "Lorem ipsum", "Section": "Lorem ipsum", "Title": "Lorem ipsum", "Url": "Lorem ipsum" }, { "Content": "Lorem ipsum", "Id": "Lorem ipsum", "IllustratingImage120Url": "Lorem ipsum", "SearchPublishDate": "Lorem ipsum", "SearchUpdateDate": "Lorem ipsum", "Section": "Lorem ipsum", "Title": "Lorem ipsum", "Url": "Lorem ipsum" } ] }; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="mainCtrl"> <ul> <li ng-repeat="(key,value) in result.Hits">{{ value.Content }}</li> </ul> </div> 

Answer 4

I think the problem is that you have an Array contained within a JSON Object.

Please try

<ul>
    <li ng-repeat="Content in result.Hits">{{ Content.Content }}</li>
</ul>