Javascript 使用JQuery将JSON项添加到HTML列表

我使用JQuery将JSON文件中的项目动态添加到HTML页面

HTML:

问题是数据的添加方式不对。加载页面后，HTML如下所示：

项目1、项目2和项目3被添加到产品1中，而我只希望“产品1”下的所有“项目”都在产品1列表中

基本上：

  Product 1
      - Item 1.1
      - Item 1.2

但我得到了：

  Product 1
      - Item 1.1
      - Item 2
      - Item 3

---

任何提示都将不胜感激。

您正在将结果添加到类

项中，该项位于三个位置。因此，它被附加到三个
中

尝试为您的
标记提供id，如
…
，而不是
您正在将结果添加到类
项中，该项位于三个位置。因此，它被附加到三个
中

尝试为您的
标记提供id，如
…
，而不是
此：

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

选择类为
项的所有html标记。因此，您将详细信息附加到所有现有的

使用更特殊的选择器将新内容添加到列表元素。
此选项：

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

选择类为
项的所有html标记。因此，您将详细信息附加到所有现有的

使用更特殊的选择器将新内容添加到列表元素。
确定。。我在你的解决方案中发现了几个bug


现在请注意，您的迭代：

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

没有正确迭代，因为数组中只有一个对象，所以每个项都应该是一个独立的对象{“name”：“bla bla bla”}

第二步，将项目附加到ALL.item，并为每个项目添加一个UL，这也是错误的。。请查看我的代码，如果有帮助请告诉我。
好的。。我在你的解决方案中发现了几个bug


现在请注意，您的迭代：

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

没有正确迭代，因为数组中只有一个对象，所以每个项都应该是一个独立的对象{“name”：“bla bla bla”}

第二步，将项目附加到ALL.item，并为每个项目添加一个UL，这也是错误的。。请查看我的代码，并告诉我是否有用。
您的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);
});

$。每个（cwData.product，函数（i，产品）{
var option_cate=（“
”）；
$（“#产品列表”）。附加（选项#cate）；
var html='
'；
$.each（产品.项目，功能（i，项目）{
html+=（'
）；
}); 
html+='
'
$（“#产品列表”）。附加（html）；
});
您的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);
});

$。每个（cwData.product，函数（i，产品）{
var option_cate=（“
”）；
$（“#产品列表”）。附加（选项#cate）；
var html='
'；
$.each（产品.项目，功能（i，项目）{
html+=（'
）；
}); 
html+='
'
$（“#产品列表”）。附加（html）；
});
根据我的观点，您必须更正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>


$（文档）.ready（函数（）{
$.getJSON（'cwdata.json'，函数（cwdata）{
//添加产品类别
$.each（cwData.product，function（i，product）{
var option_cate=（“
”）；
//警报（转储（产品项））；
//警报（产品、项目、长度）；
$（“#产品列表”）。附加（选项#cate）；
//添加产品名称
对于（var k=0；k，根据我的观点，您必须更正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>


$（文档）.ready（函数（）{
$.getJSON（'cwdata.json'，函数（cwdata）{
//添加产品类别
$.each（cwData.product，function（i，product）{
var option_cate=（“
”）；
//警报（转储（产品项））；
//警报（产品、项目、长度）；
$（“#产品列表”）。附加（选项#cate）；
//添加产品名称
对于（var k=0；k它将是工作的

像这样使用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"
                }
            ]
        }
    ]
}

然后像这样修改脚本

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

$（文档）.ready（函数（）{
$.getJSON（'test.json'，函数（cwData）{
//添加产品类别
$.each（cwData.product，function（i，product）{
var option_cate=（“
”）；
$（“#产品列表”）。附加（选项#cate）；
//添加产品名称
$.each（产品.项目，功能（i，项目）{
var option_name=（“
”）；
$（“.item:last”）.append（选项名称）；
})；//$每个（…）
})；//$每个（…）
})；//$.getJSON
})；//$文件

我希望它能起作用。
它能起作用

像这样使用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"
                }
            ]
        }
    ]
}

然后像这样修改脚本

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

$（文档）.ready（函数（）{
$.getJSON（'test.json'，函数（cwData）{
//添加产品类别
$.each（cwData.product，function（i，product）{
var option_cate=（“
”）；
$（“#产品列表”）。附加（选项#cate）；
//添加产品名称
$.each（产品.项目，功能（i，项目）{
var option_name=（“
”）；
$（“.item:last”）.append（选项名称）；
})；//$每个（…）
})；//$每个（…）
})；//$.getJSON
})；//$文件

我希望它能起作用