使用Angular Js ng-repeat显示JSON数据的问题

I am able to retrieve following JSON data (test data) from a php file :

我能够从php文件中检索以下JSON数据(测试数据):

JSON:

[{"id":"1","name":"shabri","desc":"bbkbjkbjbjnnklnln","location":"location","mobile":"498534534","telephone":"4549385","offer":"20","email":"nfnkjrnfnrndnrgnkjr"},{"id":"2","name":"bhagatfergdfgfdg","desc":"vfdgfdbgbbgbg","location":"fbgbgfbgfb","mobile":"544656757","telephone":"4223424","offer":"30","email":"vdsxdvgvgv"},{"id":"3","name":"rddfdgdf","desc":"bdffgd","location":"fghgfhfhgf","mobile":"8598","telephone":"856845","offer":"6","email":"httrdh6kiki"}]

Angular Js Controller

角度Js控制器

.controller('RestaurantsCtrl',  ['$scope', '$http', function ($scope, $http) {
$http.get('http://xyz/getRestros.php')


.success(function(data) {
  alert(data);
  $scope.Restaurants = data;
  });
}])

I am sure that JSON data is retrieved because for testing i have alert(data) which displays correct json encoded data in the alert box.

我确信检索到JSON数据是因为为了测试我有警报(数据),它在警告框中显示正确的json编码数据。

Issue is that data is not getting assigned to $scope.Restaurants. so ng-repeat in html is not populating the list.

问题是数据没有被分配到$ scope.Restaurants。所以html中的ng-repeat没有填充列表。

ng-repeat populates the list if i hard code $scope.Restaurants.

如果我硬编码$ scope.Restaurants,则ng-repeat填充列表。

what's the mistake here ? please help..

这里的错误是什么?请帮忙..

EDIT:

hard coded $scope.Restaurants that works:

硬编码$ scope。工作的餐馆:

$scope.Restaurants = [
{ name: 'Shabri', id: 1 },
{ name: 'Bhagat Tarachand', id: 2 },
{ name: 'Udipi', id: 3 },
{ name: 'Shahu', id: 4 },
{ name: 'Bagdadi', id: 5 },
{ name: 'Shiv Sagar', id: 6 }

];

ng-repeat:

<a class="item item-thumbnail-left" ng-repeat="Restaurant in Restaurants | filter: searchText" href="#/app/Restaurants/{{Restaurant.id}}">
  <img src="img/default_restro.png" style="margin-top:30px;"/>
  <h2 style="font-weight:bold;">{{Restaurant.id}}</h2>
  <p>{{Restaurant.name}}</p><br>
  <span style="white-space: pre-wrap; font-weight:300;">This is the description about the restaurant click to know more.</span><br>


</a>

3 个解决方案

#1

You can do debugging in Chrome Developer Tools view (Ctrl-Shift-I) and set breakpoint to see if $scope.Restaurant has value assigned after the line $scope.Restaurants = data;

您可以在Chrome开发者工具视图(Ctrl-Shift-I)中进行调试并设置断点,以查看$ scope.Restaurant是否在$ scope.Restaurants = data行之后分配了值;

#2

You need to parse the returned JSON string into an object.

您需要将返回的JSON字符串解析为对象。

Try

arrayData = JSON.parse(data);
$scope.Restaurants = arrayData;

#3

It's not actually a answer but i found the root cause of the problem above and might happen with someone.

它实际上不是一个答案,但我找到了上述问题的根本原因,可能会发生在某人身上。

The free web hosting I was using to host that php file was the culprit.

我用来托管该php文件的免费网络托管是罪魁祸首。

Everytime that php is executed that web hosting appended some google analytics script at the end after the object ends. That script doesn't appear while live editing that file . i don't know how.

每次执行php时,Web主机在对象结束后最后添加一些谷歌分析脚本。在实时编辑该文件时,该脚本不会出现。我不知道怎么做。

Anyway , i found it when i debugged the $scope.Restaurants again.

无论如何,当我再次调试$ scope.Restaurants时,我发现了它。

It seems that if anything else is echoed with the JSON object thn it would serialize and consider it string.

似乎如果其他任何东西与JSON对象一起回应,它将序列化并将其视为字符串。

After correcting and changing the host , difference was spotted and it was considered as actual json objects, and it worked fine.

在校正和更改主机后,发现差异并将其视为实际的json对象,并且工作正常。

#1