我有来自webservice的以下json输出:
[
{
"subCategories": [
{
"subCategories": [],
"menuItems": [],
"id": 2,
"title": "First Course",
"type": "Menu Section",
"categoryID": 9,
"isActive": true,
"orderIndex": 7
}, {
"subCategories": [],
"menuItems": [
{
"id": 0,
"price": 30,
"title": "Meat",
"ingredients": "Bread, Pate, Cilantro, Turkey.",
"cookingTimeInMinutes": 6,
"isActive": true,
"picture": "",
"categoryID": 3,
"orderIndex": 2
}],
"id": 3,
"title": "Banh Mi",
"type": "Food Item",
"categoryID": 9,
"isActive": true,
"orderIndex": 1
}],
"menuItems": [
{
"id": 1,
"price": 1,
"title": "Soup",
"ingredients": "Water, Good Stuffs, Noodles.",
"cookingTimeInMinutes": 10,
"isActive": true,
"picture": "",
"categoryID": 9,
"orderIndex": 4
}, {
"id": 3,
"price": 12,
"title": "Egg Sandwich",
"ingredients": "Egg, Sandwich",
"cookingTimeInMinutes": 6,
"isActive": true,
"picture": "",
"categoryID": 9,
"orderIndex": 3
}],
"id": 9,
"title": "Lunch",
"type": "Menu Section",
"categoryID": null,
"isActive": true,
"orderIndex": 0
}, {
"subCategories": [],
"menuItems": [],
"id": 7,
"title": "Snack",
"type": "Menu Section",
"categoryID": null,
"isActive": true,
"orderIndex": 8
}, {
"subCategories": [],
"menuItems": [],
"id": 6,
"title": "First Course",
"type": "Menu Section",
"categoryID": null,
"isActive": true,
"orderIndex": 5
}, {
"subCategories": [],
"menuItems": [
{
"id": 2,
"price": 3,
"title": "Salad",
"ingredients": "Veggies",
"cookingTimeInMinutes": 5,
"isActive": true,
"picture": "",
"categoryID": null,
"orderIndex": 9
}],
"id": -1,
"title": "Other",
"type": "Menu Section",
"categoryID": null,
"isActive": true,
"orderIndex": 1000
}]
我有以下javascript片段应该迭代提到的json并将其转换为div:
<script type="text/javascript">
/* wait until the document has finished loading before loading
* the rest of the content
*/
$(document).ready(function(){
function divifyCategory(containerID, gingerWebCategory){
$('#' + containerID).append(
$('<div class="category" id="' + gingerWebCategory.id + '">' + gingerWebCategory.title + '</div>')
);
for(menuItem in gingerWebCategory.menuItems){
$('.category#' + gingerWebCategory.id).append(
$('<div class="menuItem" id="' + menuItem.id + '">' + menuItem.title + '</div>')
);
}
}
// load menu from web service
$.get('http://localhost:50730/GingerWeb.asmx/getMenu', function(data){
var data = eval(data);
for(var i=0; i<data.length; i++){
divifyCategory(data[i]);
}
});
});
</script>
了解我在Chrome中收到此错误消息的原因:
未捕获错误:语法错误,无法识别的表达式:#[object 对象
答案 0 :(得分:1)
您的json对象是一个对象数组。当您传递data [i]时,您将传递数组中的第一个元素,一个对象,并将其视为字符串(containerID)。你需要从你传递的对象中获取ID。
答案 1 :(得分:1)
我认为data
是帖子开头提到的json字符串。 data
是一个对象数组。那么
for(var i=0; i<data.length; i++){
divifyCategory(data[i]);
}
对象已传递给函数divifyCategory
,它将字符串作为第一个参数。并且该参数像字符串一样使用
$('#' + containerID)
在运行时中获得$('#[object Object]')
。这是不可预见的情况。
我希望它有所帮助。