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

时间:2014-11-02 16:49:46

标签: javascript php json angularjs

你好我有一个在远程服务器上运行的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数据,而不仅仅是下拉菜单中每行的类别。它的格式不正确。我很感激我可以获得有关如何解决此问题的任何帮助,并让我的下拉菜单只显示类别。

提前致谢!

2 个答案:

答案 0 :(得分: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

答案 1 :(得分:0)

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

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