2014-11-02 158 views
0

你好我有一个php文件在远程服务器上运行,它抓取类别列表并将它们存储为JSON格式。该文件名为index.php的(这里的输出):在下拉菜单中显示角度应用程序中的JSON数据

[ {"category":"Accounting Services"}, 
    {"category":"Appliances Major Repair & Services"}, 
    {"category":"Auto Glass Window & Repair"}, 
    {"category":"Auto Paint & Repair"}, 
    {"category":"Bail Bonds"}, 
    {"category":"Bus Rent & Charter"}, 
    {"category":"Car Wash & Polish"}, 
    {"category":"Carpet & Rug Cleaners"}, 
    {"category":"Carpet & Rug Dyers"}, 
    {"category":"Computer Repair"}, 
    {"category":"Dentists"}, 
    {"category":"Electric Contractors"}, 
    {"category":"Elevator Repair"}, 
    {"category":"Florists"}, 
    {"category":"Furniture Upholstery"}, 
    {"category":"Garage Door Repair"}, 
    {"category":"Garbage Removal & Rubbish"}, 
    {"category":"Gymnasiums & Fitness Clubs"}, 
    {"category":"Handyman"}, 
    {"category":"Heating & Air Conditioning"}, 
    {"category":"Landscape Contractors & Designers"}, 
    {"category":"Lawyers - Bankruptcy Law"}, 
    {"category":"Lawyers - Domestic Relations & Family Law"}, 
    {"category":"Lawyers - DUI & Traffic Law"}, 
    {"category":"Limousine Rental"}, 
    {"category":"Locksmiths"}, 
    {"category":"Maid & Butler Services"}, 
    {"category":"Massage Therapy & Therapists"}, 
    {"category":"Moving & Storage - Home or Office"}, 
    {"category":"Notaries"}, 
    {"category":"Painting Contractors"}, 
    {"category":"Party Equipment & Supplies Sales & Rent"}, 
    {"category":"Party Planning Services"}, 
    {"category":"Personal Fitness Trainers"}, 
    {"category":"Pest Control Services"}, 
    {"category":"Physical Therapy & Therapists"}, 
    {"category":"Physicians & Surgeons Chiropractic"}, 
    {"category":"Plumbing Contractors"}, 
    {"category":"Real Estate Agents"}, 
    {"category":"Rent & Lease Home Furniture"}, 
    {"category":"Rent & Lease Office Furniture"}, 
    {"category":"Roofing Contractors"}, 
    {"category":"Security Guard & Patrol Services"}, 
    {"category":"Snow Removal Services"}, 
    {"category":"Tailors & Alterations"}, 
    {"category":"Tax Return Consultants"}, 
    {"category":"Taxicabs & Transportation Service"}, 
    {"category":"Television & Radio Service & Repair"}, 
    {"category":"Test Spin"}, 
    {"category":"Towing & Road Side Services"}, 
    {"category":"Tree Removal"}, 
    {"category":"Tutoring"}, 
    {"category":"Veterinarian Services"}, 
    {"category":"Window Repair & Installation"} 
] 

我试图抓住类别在这一JSON数据,并通过Ajax调用一个下拉菜单中的角应用中展示它。这里是我main.js代码文件的AJAX调用:

$http.get('http://test.s17.sevacall.com/abhas/index.php'). 
    success(function(data, status, headers, config) { 
     console.log(data);//debug 
     $scope.categories = data; 
    }). 
    error(function(data, status, headers, config) { 
     //log error 
    }); 

这里是我的显示在下拉菜单从AJAX调用数据的HTML文件代码:

<div ng-controller="MainCtrl"> 
    <span class="dropdown" on-toggle="toggled(open)"> 
     <a href class="dropdown-toggle"> 
      Click me to see some awesome things! 
     </a> 
     <ul class="dropdown-menu"> 
      <li ng-repeat="category in categories track by $index"> <!--fix this expression--> 
       <a href>{{category}}</a> 
      </li> 
     </ul> 
    </span> 
</div> 

我的问题是,JSON数据打印在下拉菜单中,但下拉菜单按字符显示JSON数据,而不仅仅是下拉菜单中每行的类别。它的格式不正确。我很感激任何帮助,我可以收到关于如何解决这个问题,并让我的下拉菜单显示只是类别。

在此先感谢!

+0

'{{category.category}}' – 2014-11-02 16:51:22

+0

谢谢Toress,不幸的是这导致我的html页面显示一个空白的下拉菜单,跨越页面的全长。由于某种原因,我的JSON数据已完全消失 – 2014-11-02 16:54:00

+2

您确定获取响应JSON对象而不是字符串吗?试试看'$ scope.categories = JSON.parse(data);' – Hatsjoem 2014-11-02 16:55:47

回答

0

我看到实际的响应如下所示,它不是纯粹的JSON,在JSON之后,我们有html评论。那就是问题所在。请仅返回JSON。

[{"category":"Accounting Services"},{"category":"Appliances Major Repair & Services"},{"category":"Auto Glass Window & Repair"},{"category":"Auto Paint & Repair"},{"category":"Bail Bonds"},{"category":"Bus Rent & Charter"},{"category":"Car Wash & Polish"},{"category":"Carpet & Rug Cleaners"},{"category":"Carpet & Rug Dyers"},{"category":"Computer Repair"},{"category":"Dentists"},{"category":"Electric Contractors"},{"category":"Elevator Repair"},{"category":"Florists"},{"category":"Furniture Upholstery"},{"category":"Garage Door Repair"},{"category":"Garbage Removal & Rubbish"},{"category":"Gymnasiums & Fitness Clubs"},{"category":"Handyman"},{"category":"Heating & Air Conditioning"},{"category":"Landscape Contractors & Designers"},{"category":"Lawyers - Bankruptcy Law"},{"category":"Lawyers - Domestic Relations & Family Law"},{"category":"Lawyers - DUI & Traffic Law"},{"category":"Limousine Rental"},{"category":"Locksmiths"},{"category":"Maid & Butler Services"},{"category":"Massage Therapy & Therapists"},{"category":"Moving & Storage - Home or Office"},{"category":"Notaries"},{"category":"Painting Contractors"},{"category":"Party Equipment & Supplies Sales & Rent"},{"category":"Party Planning Services"},{"category":"Personal Fitness Trainers"},{"category":"Pest Control Services"},{"category":"Physical Therapy & Therapists"},{"category":"Physicians & Surgeons Chiropractic"},{"category":"Plumbing Contractors"},{"category":"Real Estate Agents"},{"category":"Rent & Lease Home Furniture"},{"category":"Rent & Lease Office Furniture"},{"category":"Roofing Contractors"},{"category":"Security Guard & Patrol Services"},{"category":"Snow Removal Services"},{"category":"Tailors & Alterations"},{"category":"Tax Return Consultants"},{"category":"Taxicabs & Transportation Service"},{"category":"Television & Radio Service & Repair"},{"category":"Test Spin"},{"category":"Towing & Road Side Services"},{"category":"Tree Removal"},{"category":"Tutoring"},{"category":"Veterinarian Services"},{"category":"Window Repair & Installation"}] 
<!-- 
<html> 
    <head> 
    </head> 
    <body> 
     <div style="text-align:center; margin-top:5em;"> 
      <h1>Hello World!</h1> 
     </div> 
    </body> 
</html> 

--> 

上述josn修正后,尝试用下面

<li ng-repeat="categoryObj in categories track by $index"> <!--fix this expression--> 
      <a href>{{categoryObj.category}}</a> 
</li> 

我看你已经更新了它,供大家参考我已经创建Working Fiddle

+0

不幸的是,这只是返回一个空白的下拉菜单:( – 2014-11-02 17:16:40

+0

这意味着没有类别,你在控制台中看到ajax响应数据吗? – 2014-11-02 17:24:00

+0

是的控制台中有Ajax数据,我真的很困惑,为什么这不是工作,它显示JSON数据的方式,我在原始文章中的做法,但它显示它的字符。 – 2014-11-02 17:29:59

0
$scope.categories = JSON.parse(data); 

<li ng-repeat="(key, value) in categories track by $index"> 
    <a href>{{value}}</a> 
</li> 
+0

谢谢Dov,不幸的是,这返回了相同的结果,我得到的结果是它在下拉菜单中显示JSON数据,但它仍然按字符输出它,而不是仅仅抓住类别并将它们放在每一行上。 – 2014-11-02 17:10:37