列表未使用JSON數據使用jQuery填充

Question

我正在嘗試使用jQuery使用JSON填充有序列表，但數據未添加到列表中。 我將代碼粘貼到Fiddle中，它似乎可以正常工作。

JavaScript文件：

var data = {
    "product": [
        "Product 1",
        "Product 2",
        "Product 3"
    ],

    "company": [
        "Company 1",
        "Company 2",
        "Company 3"
    ],

    "contact": [
        "Contact 1",
        "Contact 2",
        "Contact 3"
    ]
};

$.each(data, function (key, value) {
    if (key === 'product') {
        for (var i = 0; i < value.length; i++) {
            var option = ('<li>' + value[i] + '</li>');
            $('#product').append(option);
        }
    }
    if (key === 'company') {
        for (var i = 0; i < value.length; i++) {
            var option = ('<li>' + value[i] + '</li>');
            $('#company').append(option);
        }
    }
    if (key === 'contact') {
        for (var i = 0; i < value.length; i++) {
            var option = ('<li id="new">' + value[i] + '</li>');
            $('#contact').append(option);
        }
    }
});

$('#cssmenu > ul > li > a').click(function () {
    $('#cssmenu li').removeClass('active');
    $(this).closest('li').addClass('active');
    var checkElement = $(this).next();

    if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
        $(this).closest('li').removeClass('active');
        checkElement.slideUp('normal');
    }

    if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
        $('#cssmenu ul ul:visible').slideUp('normal');
        checkElement.slideDown('normal');
    }

    if ($(this).closest('li').find('ul').children().length == 0) {
        return true;
    }
    else {
        return false;
    }
});

HTML：

<div id='cssmenu'>
    <ul>
        <li class='active'><a href='#'><span>Home</span></a>
        </li>

        <li class='has-sub'><a href='#'><span>Products</span></a>
            <ul id='product'>
            </ul>
        </li>

        <li class='has-sub'><a href='#'><span>Company</span></a>
            <ul id='company'>
            </ul>
        </li>

        <li class='last'><a href='#'><span>Contact</span></a>
            <ul id='contact'>
            </ul>
        </li>
    </ul>
</div>

這是Fiddle中的代碼：

http://jsfiddle.net/9kW3X/12/

我目前在Visual Studio 2010中使用Mobile Ready HTML5 MVC.NET模板。

我正在項目中正常使用其他jQuery代碼，因此我懷疑這是一個源問題。

任何幫助，將不勝感激。

Answer 1

您的json不正確。

http://jsfiddle.net/vsah/R3dcw/9/

var data = {
"data":{
    "product": [
    "product1",
    "product2",
    "produc3"],
    "company": [
    "company1",
    "company2",
    "company3"]
 }
}

$.each(data, function (key, value) {

if(value.product){
    var product = '<ul data-role="listview">'
    $.each(value.product, function (key, value) {
       product += '<li>'+value+'</li>';
    });
    $("#product").append(product).trigger('create');
}

if(value.company){
    var company = '<ul data-role="listview">'
    $.each(value.company, function (key, value) {
       company += '<li>'+value+'</li>';
    });
    $("#company").append(company).trigger('create');
 }


});