Displaying JSON data in angular app in drop down menu

Question

Hello I have a php file running on a remote server that grabs a list of categories and stores them in JSON format. The file is called index.php (Here's the output):

[   {"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"}
]

I am trying to grab the categories in this JSON data and display it in a drop down menu in an angular app via an AJAX call. Here is the code in my main.js file for the AJAX call:

$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
    });

Here is my code for the html file that displays the data from the AJAX call in a drop down menu:

<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>

My problem is that the json data gets printed in the drop-down menu, but the drop down menu displays the JSON data character by character, instead of just the categories on each row of the drop down menu. It's not formatted correctly. I'd appreciate any help I could receive on how to fix this problem and get my drop down menu to display just the categories.

Thanks in advance!

Answer 1

I see actual response coming like below, its not pure JSON, after JSON you've html comment we have. That is the problem. please return only 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>

-->

After above josn correction, Try with below

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

I see you've updated it, For your reference I've create Working Fiddle.

Answer 2

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

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