CODEWITHSUNDEEP
javascripthtmlangularjs
Pad
Pad

Reputation: 45

Simple Angular.js: ng-repeat not showing data

i am trying to get a simple angular.js script working, just getting information from a mysql db and show them via ng-repeat. The site is just blank, no error or something like that ... so i suggest i got a logical problem here.

controller:

var app = angular.module('ISPapp', []);
app.controller('artikelController', function($scope, $http) {
	
	getArtikel();
	
	function getArtikel(){
		$http.post("ajax/get_artikel.php").success(function(data){
		$scope.artikel_entrys = data;
		});
	};

});

Output:

<table ng-controller="artikelController">

<thead><tr><th>ID</th><th>Artikelnr</th><th>Kit</th><th>Min Bestand</th><th>Beschreibung</th>< tr></thead>

<tbody>

<tr ng-repeat="row in artikel_entrys">
	<td>{{row.id}}</td>
	<td>{{row.artikelnr}}</td>
	<td> Test </td>
	<td>{{row.min_bestand}}</td>
	<td>{{row.beschreibung}}</td>
</tr>

</tbody> </table>

Index:

<!DOCTYPE html>

<html ng-app="ISPapp">

<head>
	<script type="text/javascript" src="js/angular.min.js"></script>
	<script type="text/javascript" src="js/app.js"></script>
</head>

<body ng-controller="artikelController">

<div ng-include src="app/artikel.html"></div>

</body>

</html>

The json object from PHP is fine.

Thanks for your help in advance!

gz Pad

Upvotes: 0

Views: 3121

Answers (3)

NoloMokgosi
NoloMokgosi

Reputation: 1708

The issue was on my side , because my ng-repeat was outside of my ng-controller. Check, it may help someone.

Upvotes: 1

Pad
Pad

Reputation: 45

i tried a few other things and now it is working with this code:

Index HTML

<!doctype html>
<html ng-app>
<head>
<title>ISP Artikel</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="script.js"></script>
</head>

<body>
<div ng-controller="getArtikel">

<table>
<thead><tr><th>ID</th><th>Artikel Nr</th><th>Beschreibung</th></tr></thead>
<tbody>
<tr ng-repeat="row in artikel_entrys"><td>{{row.id}}</td><td>{{ row.artikelnr }}</td><td>{{row.beschreibung}}</td></tr>
</tbody>
</tfoot></tfoot>
</table>

</div>
</body>

And this Javascript snippet

function getArtikel($scope, $http) {
    // this is where the JSON from api.php is consumed
    $http.get('ajax/get_artikel.php').
        success(function(data) {
            // here the data from the api is assigned to a variable named users
            $scope.artikel_entrys = data;
        });
}

It is the same PHP Api behind that than before. Same Json Object...

I am glad that it works now but can anyone explain me what i have done wrong before? :-)

Upvotes: 0

user84
user84

Reputation: 865

The way that you are using ng-repeat is used for an array.

To move through a JSON object you have to go other way around

<div ng-repeat="(key, value) in myObj"> ... </div>

Upvotes: 0

Related Questions