在下拉菜单中的angular应用程序中显示JSON数据


Displaying JSON data in angular app in drop down menu

你好,我有一个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
    });

以下是我的html文件代码,该文件在下拉菜单中显示AJAX调用的数据:

<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数据,而不仅仅是下拉菜单每行上的类别。它的格式不正确。如果我能得到任何关于如何解决这个问题的帮助,并让我的下拉菜单只显示类别,我将不胜感激。

提前感谢!

我看到实际的响应如下,它不是纯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

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