ng-repeat is not working in AngularJS 1.6

Question

I'm new to AngularJS, I'm using the version 1.6 and I'm getting my info from my database, it is working but when I want to access to the JSON info is not displaying data.

This is my code

<div class="row m-t-50">
    {{ autos |json }}
    <div class="col-md-12">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>Marca</th>
                    <th>Modelo</th>
                    <th>Color</th>
                    <th>Año</th>
                    <th>Precio</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="auto in autos">
                    <td>{{ auto.marca }}</td>
                    <td>{{ auto.modelo }}</td>
                    <td>{{ auto.color }}</td>
                    <td>{{ auto.anio }}</td>
                    <td>{{ auto.precio }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

{{ autos | json }} shows this:

{
    "data": [{
        "id": "1",
        "marca": "TOYOTA",
        "modelo": "VC2017",
        "color": "Verde",
        "anio": "2017",
        "precio": "250345"
    }, {
        "id": "2",
        "marca": "NISSAN",
        "modelo": "NS2017",
        "color": "Azul",
        "anio": "2016",
        "precio": "540000"
    }],
    "status": 200,
    "config": {
        "method": "GET",
        "transformRequest": [null],
        "transformResponse": [null],
        "jsonpCallbackParam": "callback",
        "url": "php/obtener-autos.php",
        "headers": {
            "Accept": "application/json, text/plain, */*"
        }
    },
    "statusText": "OK"
}

But the table is just blank, what I am doing wrong?

first you need to convert it to object from json. – Jenny Jan 25 '17 at 06:16 — Jenny, Jan 25 '17 at 06:16
show your controller code. – Durgpal Singh Jan 25 '17 at 06:17 — Durgpal Singh, Jan 25 '17 at 06:17

Tushar · Accepted Answer · 2017-01-25T06:32:02.817

6

The ng-repeat is used on <tr ng-repeat="auto in autos">. From the given data, the repeat should be applied on autos.data array.

Use

<tr ng-repeat="auto in autos.data">

OR

In controller, assign the data from response to the autos variable.

$scope.autos = response.data;

And use this in view as it is

<tr ng-repeat="auto in autos">

The autos is the response of an $http request. The response contains data property to access the actual response sent from the server. To access response data use response.data.

Other properties are status – status, headers, config and statusText.

edited Jan 25 '17 at 06:32

answered Jan 25 '17 at 06:16

Tushar

85,780
21
159
179

Thank you!, now it is working but it's something about angularjs version? long time ago with another version 1.5 I think I saw an example where .data it wasn't there – Fixer Jan 25 '17 at 06:19
@Fixer No. This has nothing to do with Angular Version. As far as I remember, this format is from the first version of AngularJS. – Tushar Jan 25 '17 at 06:23
I get it now, what about If i want only to be returned the info without those properties? there is a difference? – Fixer Jan 25 '17 at 06:28
@Fixer In controller, assign `$scope.autos = response.data;`. – Tushar Jan 25 '17 at 06:30
1

@Fixer in your response object you have other objects to when you say ng-repaet="auto in autos" you are iterating the whole object. To get access to inside objects you need to mention autos.data / autos.config so that you will get access to them. – Rajath M S Jan 25 '17 at 06:35

score 1 · Answer 2 · answered Jan 25 '17 at 06:19

You should use autos.data,

DEMO

var app = angular.module('todoApp', []);

app.controller("dobController", ["$scope",
  function($scope) {
     $scope.autos ={"data": [ { "id": "1", "marca": "TOYOTA", "modelo": "VC2017", "color": "Verde", "anio": "2017", "precio": "250345" }, { "id": "2", "marca": "NISSAN", "modelo": "NS2017", "color": "Azul", "anio": "2016", "precio": "540000" } ], "status": 200, "config": { "method": "GET", "transformRequest": [ null ], "transformResponse": [ null ], "jsonpCallbackParam": "callback", "url": "php/obtener-autos.php", "headers": { "Accept": "application/json, text/plain, */*" } }, "statusText": "OK" };
   
  }
]);

<!DOCTYPE html>
<html ng-app="todoApp">

<head>
  <title>Sample</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
</head>
<body ng-controller="dobController">
   <div class="row m-t-50">
{{ autos |json }}
<div class="col-md-12">
    <table class="table table-striped">
        <thead>
            <tr>
                <th>Marca</th>
                <th>Modelo</th>
                <th>Color</th>
                <th>Año</th>
                <th>Precio</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="auto in autos.data">
                <td>{{ auto.marca }}</td>
                <td>{{ auto.modelo }}</td>
                <td>{{ auto.color }}</td>
                <td>{{ auto.anio }}</td>
                <td>{{ auto.precio }}</td>
            </tr>
        </tbody>
    </table>
</div>
</body>

</html>

score 0 · Answer 3 · answered Jan 25 '17 at 06:22

0

  <body ng-controller="MyCtrl">
      <div>
        <div ng-repeat="d in data"> {{ d.marca }}</div>
      </div>
  </body>

Working plnkr here Plunker

answered Jan 25 '17 at 06:22

Durgpal Singh

11,481
4
37
49

score 0 · Answer 4 · edited Feb 08 '17 at 06:36

in Angular version 1.6.1 use this example

your html

<table class="table table-striped">
        <thead>
            <tr>
                <th>Marca</th>
                <th>Modelo</th>
                <th>Color</th>
                <th>Año</th>
                <th>Precio</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="auto in autos">
                <td>{{ auto.marca }}</td>
                <td>{{ auto.modelo }}</td>
                <td>{{ auto.color }}</td>
                <td>{{ auto.anio }}</td>
                <td>{{ auto.precio }}</td>
            </tr>
        </tbody>
    </table>

your code

 $http.get("your url").then(function (response) {
            $scope.cars= JSON.parse(response.data);
        });

Do not forget to insert this line JSON.parse(response.data) the version 1.6.1 require.

ng-repeat is not working in AngularJS 1.6

4 Answers4