Question

I have the following json output from a webservice:

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

And I have the following javascript snippet that is supposed to iterate over mentioned json and turn it into divs:

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

Any idea on why I get this error message in Chrome:

Uncaught Error: Syntax error, unrecognized expression: #[object
Object]

?

Answer 1

Your json object is an array of objects. When you pass data[i], you are passing the first element in the array, an object, and treating it like a string (containerID). You need to get the ID from the object you’re passing.