在下拉菜單中顯示角度應用程序中的JSON數據

Question

你好我有一個php文件在遠程服務器上運行，它抓取類別列表並將它們存儲爲JSON格式。該文件名爲index.php的（這裏的輸出）：

[ {"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數據，而不僅僅是下拉菜單中每行的類別。它的格式不正確。我很感激任何幫助，我可以收到關於如何解決這個問題，並讓我的下拉菜單顯示只是類別。

在此先感謝！

Answer 1

我看到實際的響應如下所示，它不是純粹的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。

Answer 2

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

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