列表未使用jQuery与JSON数据填充

我正在尝试使用jQuery填充JSON的有序列表，但数据未被添加到列表中。我在Fiddle中粘贴了我的代码，它似乎正在按照它应该的方式工作。列表未使用jQuery与JSON数据填充

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>

这里是小提琴代码：

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

我目前使用的移动就绪HTML5 MVC.NET模板在Visual Studio 2010.

我在我的项目中正在使用其他jQuery代码工作正常，所以我怀疑它是一个源代码问题。

任何帮助，将不胜感激。

来源

2014-02-07 Pierre Nortje

我不知道这一点，但你应该reasearch一点。我想在MVC.NET中，你不能使用传统的jQuery JSON解析（我猜你正在使用Ajax）。 – Victor

你的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'); 
} 


});

来源

2014-02-07 13:53:48 Ved

这适用于小提琴，但不适用于VS2010。我认为这可能与HMTL页面有关。这是我的HTML页面的样子（“Index.cshtml”）：http://jsfiddle.net/R3dcw/12/ –

也添加jquery文件 – Ved

以下是所有代码：http://jsfiddle.net/R3dcw/ 13/ –

列表未使用jQuery与JSON数据填充

回答

相关问题