使用JQuery將JSON項目添加到HTML列表中

Question

我正在使用JQuery將JSON文件中的項目動態添加到HTML頁面。

HTML：

<div id='cssmenu'>
    <ul id='options'>
        <li class='active'><a href='#'><span>Home</span></a>
            <ul id='home'></ul></li>
        <li class='has-sub'><a href='#'><span>Products</span></a>
            <ul id='product_list'></ul></li>
        <li class='has-sub'><a href='#'><span>Company</span></a>
            <ul id='company'></ul></li>
        <li class='has-sub'><a href='#'><span>Contact</span></a>
            <ul id='contact'></ul></li>
    </ul>
</div>

JQuery的：

$(document).ready(function () {
    $.getJSON('../JSON/cwdata.json', function (cwData) {
        // Add the product categories
        $.each(cwData.product, function (i, product) {
            var option_cate = ('<li class="item"><a href="#">' + product.category + '</a></li>');
            $('#product_list').append(option_cate);
            // Add the product names
            $.each(product.items, function (i, item) {
                var option_name = ('<ul class="details" style="display: none;"><li class="name"><a href="#">' + item.name + '</a></li></ul>');
                $(".item").append(option_name);
            }); //$.each(...)
        }); //$.each(...)
    }); //$.getJSON
});     //$document

JSON（cwdata.json文件）：

{
    "product": [
        {
            "category": "Product 1",
            "items": [
                {
                    "name": "Item 1.1",
                                    "name": "Item 1.2"
                }
            ]
        },
        {
            "category": "Product 2",
            "items": [
                {
                    "name": "Item 2"
                }
            ]
        },
        {
            "category": "Product 3",
            "items": [
                {
                    "name": "Item 3"
                }
            ]
        }
    ]
}

問題是數據添加方式錯誤。 頁面加載后，HTML如下所示：

。

項目1，項目2和項目3已添加到產品1，而我只希望“產品1”下的所有“項目”都在產品1列表中。

基本上：

  Product 1
      - Item 1.1
      - Item 1.2

但我得到：

  Product 1
      - Item 1.1
      - Item 2
      - Item 3

任何提示將不勝感激。

Answer 1

好的，我在您的解決方案中發現了幾個錯誤。

首先，這是修改后的工作版本

現在，請注意您的迭代：

$.each(product.items, function (i, item) {

由於數組中只有一個對象，因此無法正確地進行迭代，因此每個項目都應該是一個獨立的對象{“ name”：“ bla bla bla”}

其次，您將這些項目附加到ALL .item並為每個項目添加UL，這也有問題。.請查看我的代碼，讓我知道它是否有幫助。

Answer 2

您的json錯誤。 例如：

代替

"items": [
            {
                "name": "Item 1.1",
                "name": "Item 1.2"
            }
        ]

它應該是：

"items": [
            { "name": "Item 1.1" },
            { "name": "Item 1.2" }
         ]

更正后，您可以將代碼更改為-

$.each(cwData.product, function (i, product) {
    var option_cate = ('<li class="item"><a href="#">' + product.category + '</a></li>');
    $('#product_list').append(option_cate);
    var html = '<ul class="details">';

    $.each(product.items, function (i, item) {
        html += ('<li class="name"><a href="#">' + item.name + '</a></li>');
    }); 
    html += '</ul>'
    $('#product_list').append(html);
});

Answer 3

您要將結果附加到存在於三個位置的類item中。 因此它被附加到三個<li class="items"> 。

嘗試給您的<li>標簽提供id，例如<li id="product1">...而不是<li class="item">

Answer 4

這個：

$(".item").append(option_name);

選擇所有帶class item html標簽。 因此，您要將詳細信息附加到所有現有的<li class="item"> 。

使用更具體的選擇器將新內容添加到列表元素。

Answer 5

根據我的觀點，您必須像這樣更正JSON：

{
    "product": [
        {
            "category": "Product 1",
            "items": ["Item 1-1","Item 1-2","Item 1-3"]
        },
        {
            "category": "Product 2",
            "items": ["Item 2-1","Item 2-2","Item 2-3"]
        },
        {
            "category": "Product 3",
            "items": ["Item 3-1", "Item 3-2","Item 3-3"]
        }
    ]
}

然后使用下面的代碼，希望它對您有用：

<script>
$(document).ready(function () {
    $.getJSON('cwdata.json', function (cwData) {
        // Add the product categories
        $.each(cwData.product, function (i, product) {
            var option_cate = ('<li class="item'+i+'"><a href="#">' + product.category + '</a></li>');
            //alert(dump(product.items));
            //alert(product.items.length);
            $('#product_list').append(option_cate);
            // Add the product names
            for(var k=0;k<(product.items.length);k++){
                var option_name = ('<ul class="details"><li class="name"><a href="#">' + product.items[k] + '</a></li></ul>');
                //console.log(option_name);
                $(".item"+i).append(option_name);
            }
        }); //$.each(...)
    }); //$.getJSON
});     //$document  

</script>

請享用..... ：）

Answer 6

會的

像這樣使用json formate

{
    "product": [
        {
            "category": "Product 1",
            "items": [
            { "name": "Item 1.1" },
            { "name": "Item 1.2" }
         ]
        },
        {
            "category": "Product 2",
            "items": [
                {
                    "name": "Item 2"
                }
            ]
        },
        {
            "category": "Product 3",
            "items": [
                {
                    "name": "Item 3"
                }
            ]
        }
    ]
}

並像這樣更正您的腳本

$(document).ready(function () {
    $.getJSON('test.json', function (cwData) {

        // Add the product categories
        $.each(cwData.product, function (i, product) {


            var option_cate = ('<li class="item"><a href="#">' + product.category + '</a></li>');

            $('#product_list').append(option_cate);
            // Add the product names
            $.each(product.items, function (i, item) {

                var option_name = ('<ul class="details" style=""><li class="name"><a href="#">' + item.name + '</a></li></ul>');
                $(".item:last").append(option_name);
            }); //$.each(...)
        }); //$.each(...)
    }); //$.getJSON
});     //$document 

我希望它能起作用。

Answer 7

如果要從c＃中以字符串形式獲取json數據，則需要在javascript中解析為json。

function success(response) {
        $('.listboxclass').empty();
        $('.listboxclass').append('<option value="0">Select</option>');
        $.each(JSON.parse(response.d), function(i, obj) {
            $('.listboxclass').append('<option value="'+obj.id+'">'+obj.name+'</option>');
        });
    }

這里listboxclass是列表框的類名。

這是返回Ajax調用的c＃Web方法代碼。

[WebMethod]
public static string GetScreenList(string tId)
{
        return "[{\"id\":\"1\",\"name\":\"aaa\"},{\"id\":\"2\",\"name\":\"bbb\"}]";
}