The ng-repeat directive seems to be malfunctioning in AngularJS 1.6

Question

The ng-repeat directive seems to be malfunctioning in AngularJS 1.6

Recently diving into AngularJS, I opted for version 1.6 to fetch data from my database. Everything seems to be in place, but the JSON information fails to display.

This is the snippet of 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>

The output of {{ autos | json }} appears as follows:

{
    "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"
}

Despite having the JSON data, the displayed table remains empty. Any idea where I might have gone wrong?

javascript angularjs angularjs-1.6

Answer 1

Answer №1

Utilize the ng-repeat directive on

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

. Based on the provided data, the iteration should be applied to the autos.data array.

Modify it as:

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

OR

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

$scope.autos = response.data;

Then use it in the view as follows:

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

The object named autos represents the result of an $http request. This response includes a property called data for accessing the actual data transmitted from the server. To retrieve this data, utilize response.data.

Additional properties available are status – status, headers, config, and statusText.

Answer 2

Utilize the ng-repeat directive on

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

. Based on the provided data, the iteration should be applied to the autos.data array.

Modify it as:

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

OR

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

$scope.autos = response.data;

Then use it in the view as follows:

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

The object named autos represents the result of an $http request. This response includes a property called data for accessing the actual data transmitted from the server. To retrieve this data, utilize response.data.

Additional properties available are status – status, headers, config, and statusText.

Answer 3

Answer №2

For optimal results, utilize the autos.data method.

EXEMPLIFICATION

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>Brand</th>
                <th>Model</th>
                <th>Color</th>
                <th>Year</th>
                <th>Price</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>

Answer 4

For optimal results, utilize the autos.data method.

EXEMPLIFICATION

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>Brand</th>
                <th>Model</th>
                <th>Color</th>
                <th>Year</th>
                <th>Price</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>

Answer 5

Answer №3

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

Check out the live version on Plunker

Answer 6

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

Check out the live version on Plunker

Answer 7

Answer №4

For Angular version 1.6.1, you can refer to this example:

Your HTML:

<table class="table table-striped">
        <thead>
            <tr>
                <th>Brand</th>
                <th>Model</th>
                <th>Color</th>
                <th>Year</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="car in cars">
                <td>{{ car.brand }}</td>
                <td>{{ car.model }}</td>
                <td>{{ car.color }}</td>
                <td>{{ car.year }}</td>
                <td>{{ car.price }}</td>
            </tr>
        </tbody>
    </table>

Your code:

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

Make sure to include JSON.parse(response.data), as it is required in version 1.6.1.

Answer 8

For Angular version 1.6.1, you can refer to this example:

Your HTML:

<table class="table table-striped">
        <thead>
            <tr>
                <th>Brand</th>
                <th>Model</th>
                <th>Color</th>
                <th>Year</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="car in cars">
                <td>{{ car.brand }}</td>
                <td>{{ car.model }}</td>
                <td>{{ car.color }}</td>
                <td>{{ car.year }}</td>
                <td>{{ car.price }}</td>
            </tr>
        </tbody>
    </table>

Your code:

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

Make sure to include JSON.parse(response.data), as it is required in version 1.6.1.

The ng-repeat directive seems to be malfunctioning in AngularJS 1.6

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Incorporate dynamic body color changes across all pages using AngularJS

What could be causing the VueJS function not to be triggered by the dropdown selection?

Searching for the actual "value" of ng-href - a mysterious journey into the world of AngularJS!

What is the best way to retrieve recently inserted data using Sequelize in PostgreSql?

the state hooks are failing to update the state when there is a change

Discovering the overlap between two arrays using Node.js

Using ReactJS and Ruby on Rails to implement an AJAX delete request

Convert Ajax null value to NoneType in web2py

Error Encountered in .then Method with Vue.js

Learn the process of crafting a higher order function within a functional component in React

How can we distinguish between the two samples?

Triggering a Javascript load event after injecting HTML

The function 'append' is not defined for the HTMLDivElement object when using Internet Explorer

The scrollBy function is disabled when the user is already scrolling (iOS only)

Numerous functionalities within the Angular configuration

How to display a name in an iframe using React

In an empty JavaScript MVVM Organization View, the ViewModel is packed with lines of code

I'm wondering why my images aren't fading out correctly

Steps to store a string with all characters in a JavaScript variable

The checkbox labeled "Shipping Same as Billing" is not functioning correctly. I have included my JavaScript code below, can someone please help me identify what I am overlooking? (Only JavaScript code is provided; HTML is