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看起来像这样：

HTML after page has been loaded

第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

好的..我在你的解决方案中发现了几个错误..

First this is a modified working version

现在请注意你的迭代：

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

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

其次，你将这些项目附加到所有.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);

选择所有类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格式

{
    "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\"}]";
}

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

7 个答案: