没有使用带有 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');
 }


});