0

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!

8
  • <a href>{{category.category}}</a> Commented Nov 2, 2014 at 16:51
  • Thank you Toress, unfortunately this causes my html page to display a blank drop down menu that spans the full length of the page. My JSON data has completely disappeared from it for some reason Commented Nov 2, 2014 at 16:54
  • 2
    Are you sure the get responds a JSON object and not a string? Try $scope.categories = JSON.parse(data); Commented Nov 2, 2014 at 16:55
  • Thank you Hatsjoem, unfortunately doing that makes my drop down menu go blank, so I think I am getting JSON data since my drop down menu displays each character from my JSON output above row by row. Commented Nov 2, 2014 at 17:04
  • I believe your server doesn't return a JSON object though... Commented Nov 2, 2014 at 17:16

2 Answers 2

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.

Sign up to request clarification or add additional context in comments.

6 Comments

unfortunately this just returns a blank drop down menu :(
That means there are no categories, did you see ajax response data in console?
Yes there is Ajax data in the console, I am really confused as to why this isn't working. It displays the JSON data the way I did it in the original post but it shows it character by character.
did you follow @Hatsjoem suggestions to return right json content type with this answer stackoverflow.com/questions/4064444/…, and test resulted data through jsonlint.com
Thank you so much Venkata, I followed the url you posted, and deleted the comment in my php file and it worked! You rock dude!!!
|
0
$scope.categories = JSON.parse(data);

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

1 Comment

Thanks Dov, unfortunately this returns the same result that I've been getting where it does display The JSON data in drop down, however it's still outputting it character by character instead of just grabbing the categories themselves and putting those on each row.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.