[英]Displaying JSON data in angular app in drop down menu
Hello I have a php file running on a remote server that grabs a list of categories and stores them in JSON format. 您好,我有一个在远程服务器上运行的php文件,该文件可获取类别列表并将其存储为JSON格式。 The file is called index.php (Here's the output): 该文件称为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"}
]
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. 我正在尝试获取此JSON数据中的类别,并通过AJAX调用将其显示在angular应用程序的下拉菜单中。 Here is the code in my main.js file for the AJAX call: 这是我的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
});
Here is my code for the html file that displays the data from the AJAX call in a drop down menu: 这是我的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>
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. 我的问题是json数据会在下拉菜单中打印,但是下拉菜单会逐字符显示JSON数据,而不仅仅是下拉菜单每一行的类别。 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! 提前致谢!
I see actual response coming like below, its not pure JSON, after JSON you've html comment we have. 我看到实际的响应如下图所示,它不是纯JSON,在JSON之后您已经有了html注释。 That is the problem. 那就是问题所在。 please return only JSON. 请仅返回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 经过以上josn校正后,请尝试以下操作
<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 . 我看到您已经对其进行了更新,为了创建参考,我创建了Working Fiddle 。
$scope.categories = JSON.parse(data);
<li ng-repeat="(key, value) in categories track by $index">
<a href>{{value}}</a>
</li>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.