Angular.js ng-repeat list from *.JSON file

Question

I begin learning Angular.js and I have first little problem.

This is my hello.js file:

function Hello($scope, $http) {
  $http.get('URL').
  success(function(data) {
  $scope.response = data
 });}

The response is a *.json file that I need to parse. JSON looks in a way:

"data":[{
   "status":"true",
   "name":"blabla"
},{
   "status":"true",
   "name":"blabla2"
}]

In index.html file I have <div ng-controller="Hello"> where I would like to make a list of all JSON's status and name fields.

I have no idea how could I use ng-repeat in order to make a list of all components from *.json file. Could you help me? :)

Cheers,

Luke

Answer 1

Example: if you assign the json data to a $scope variable in your Controller, then this is one possible way of using ng-repeat to show it in the View:

HTML:

<div ng-app='App' ng-controller="AppCtrl">
  <table>
     <tr>
         <th ng-repeat="(key, val) in data[0]">{{key}}</th>
     </tr>
     <tr ng-repeat="stuff in data">
         <td ng-repeat="(key, val) in stuff">{{val}}</td>
     </tr>
  </table>
</div>

JS:

angular.module('App', [])
.controller('AppCtrl', function($scope) {

    $scope.data = [
        {"status":"true",
          "name":"blabla"},
        {"status":"true",
         "name":"blabla2"}
    ];
});

Output:

name status
blabla true
blabla2 true

EDIT: updated fiddle: http://jsfiddle.net/nndc91cp/2/


or you can create a list this way:
HTML:

<ul>
   <li ng-repeat="stuff in data"> {{stuff.status}} : {{stuff.name}}</li>
</ul>

Output:

• true : blabla
• true : blabla2

Answer 2

If I understood your question properly, and you want to keep your controller as it is, you should do something like:

Html:

<ul>
    <li ng-repeat="resp in response.data"> 
        My Status: {{resp.status}} and my Name: {{resp.name}}
    </li>
</ul>

Hope I've been helpfull.