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

I've tried to do it in such a way: <li>{{response.data.0.name}} : {{response.data.0.status}}</li>. And of course it works.. but I have no idea how could I make auto-list.. not a list that I need to change.. — Luke
– Luke, Commented May 20, 2015 at 20:49

AndreaM16 · Accepted Answer · 2018-03-13 11:57:44Z

0

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.

edited Mar 13, 2018 at 11:57

answered May 20, 2015 at 21:24

AndreaM16

4,0055 gold badges37 silver badges78 bronze badges

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

1 Comment

RAC Over a year ago

There is no need for a <div> element in a list. You can add the repeat directly to the <li> ex: <li ng-repeat="resp in response.data">My Status: {{resp.status}} and my Name: {{resp.name}}</li>

Shehryar Abbasi · Accepted Answer · 2015-05-20 21:22:34Z

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

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related