javascript - 将数据加载到嵌套的可折叠集中

Question

当前从服务器加载 JSON 数据并最终将它们显示在可折叠集中，如下所示:

我试图按如下方式显示它 - 嵌套的可折叠集。有什么办法可以实现这一点吗？

我的第一张图片的代码:

//JS CODE
$(document).on("pageinit", "#view", function () {
    $.getJSON("http://www.examplesite.com/view.php", function (data) {
        $.each(data, function (elem) {
            var wrap = $("<div/>").attr('data-role', 'collapsible');
            $("<h1/>", {
                text: data[elem].type
            }).appendTo(wrap);

            $("<p/>", {
                text: "Name: " + data[elem].name
            }).appendTo(wrap);

            $("<p/>", {
                text: "Quantity: " + data[elem].quantity
            }).appendTo(wrap);

            $("<p/>", {
                text: "Barcode: " + data[elem].barcode
            }).appendTo(wrap);

            $("<p/>", {
                text: "Detail: " + data[elem].detail
            }).appendTo(wrap);

            wrap.appendTo('#view-list');
        });
        $("#view-list").collapsibleset();
    });
});

<!--HTML CODE-->
<article data-role="content">
    <div data-role="collapsible" data-collapsed="false" id="view-list">
        <!--load data here-->
    </div>
 </article>

我尝试了以下方法来获得结果，但最终得到了 2 个独立的可折叠套件。

//JS CODE
$(document).on("pageinit", "#view", function () {
    $.getJSON("http://www.examplesite.com/view.php", function (data) {
        $.each(data, function (elem) {
            var wrap = $("<div/>").attr('data-role', 'collapsible');
            var subWrap = $("<div/>").attr('data-role', 'collapsible');
            $("<h1/>", {
                text: data[elem].type
            }).appendTo(wrap);

            $("<h2/>", {
                text: data[elem].name
            }).appendTo(subWrap);

            $("<p/>", {
                text: "Quantity: " + data[elem].quantity
            }).appendTo(subWrap);

            $("<p/>", {
                text: "Barcode: " + data[elem].barcode
            }).appendTo(subWrap);

            $("<p/>", {
                text: "Detail: " + data[elem].detail
            }).appendTo(subWrap);

            wrap.appendTo('#view-list');
            subWrap.appendTo('#sub-view-list');
        });
        $("#view-list").collapsibleset();
        $("#sub-view-list").collapsibleset();
    });
});

<!--HTML Code-->
<article data-role="content">
    <div data-role="collapsible" data-collapsed="false" id="view-list">
        <!--first collapsible data load here-->
        <div data-role="collapsible" id="sub-view-list">
            <!--Sub data wil load here-->
        </div>
    </div>
</article>

我正在访问的 JSON 字符串:

[
  {
    "id": "1",
    "type": "Beverage",
    "name": "Orange Juice",
    "quantity": "10",
    "barcode": null,
    "detail": "1 Ltr Bottle"
  },
  {
    "id": "3",
    "type": "Beverage",
    "name": "Apple Juice",
    "quantity": "10",
    "barcode": null,
    "detail": "1 Ltr Bottle"
  },
  {
    "id": "4",
    "type": "Beverage",
    "name": "Mango Juice",
    "quantity": "10",
    "barcode": null,
    "detail": "1 Ltr Bottle"
  },
  {
    "id": "5",
    "type": "Beverage",
    "name": "Cranberry Juice",
    "quantity": "20",
    "barcode": null,
    "detail": "2 Ltr Bottle"
  },
  {
    "id": "6",
    "type": "Beverage",
    "name": "Strawberry Juice",
    "quantity": "20",
    "barcode": null,
    "detail": "2 Ltr Bottle"
  },
  {
    "id": "7",
    "type": "Beverage",
    "name": "Pear Juice",
    "quantity": "15",
    "barcode": null,
    "detail": "1.5 Ltr Bottle"
  },
  {
    "id": "8",
    "type": "Canned Food",
    "name": "Baked Beans",
    "quantity": "10",
    "barcode": null,
    "detail": "300g"
  },
  {
    "id": "9",
    "type": "Canned Food",
    "name": "Sardines",
    "quantity": "10",
    "barcode": null,
    "detail": "300g"
  },
  {
    "id": "10",
    "type": "Canned Food",
    "name": "Hot Dog",
    "quantity": "20",
    "barcode": null,
    "detail": ""
  },
  {
    "id": "11",
    "type": "Canned Food",
    "name": "Sweet Corn",
    "quantity": "20",
    "barcode": null,
    "detail": "500g"
  },
  {
    "id": "12",
    "type": "Canned Food",
    "name": "Sweet Potato",
    "quantity": "15",
    "barcode": null,
    "detail": null
  },
  {
    "id": "13",
    "type": "Chocolate",
    "name": "Carbury",
    "quantity": "10",
    "barcode": null,
    "detail": "50g"
  },
  {
    "id": "14",
    "type": "Chocolate",
    "name": "Lindt",
    "quantity": "10",
    "barcode": null,
    "detail": "50g"
  },
  {
    "id": "15",
    "type": "Chocolate",
    "name": "Kit Kat",
    "quantity": "20",
    "barcode": null,
    "detail": "70g"
  },
  {
    "id": "16",
    "type": "Chocolate",
    "name": "Mars",
    "quantity": "20",
    "barcode": null,
    "detail": null
  },
  {
    "id": "17",
    "type": "Chocolate",
    "name": "Toblerone",
    "quantity": "15",
    "barcode": null,
    "detail": "500g"
  }
]

Answer 1

我不会进入 jQuery 移动部分，因为我没有手机来测试它，但是您面临的问题可以通过将数组映射到基于新对象的方法来解决关于类型。

for(var i in data) (result[data[i].type]||(result[data[i].type]=[])).push(data[i]);

它的作用是迭代 JSON 数组，对于每个项目，它将在结果对象中为该类型创建一个新数组(如果该类型尚不存在)，然后将当前项目附加到该类型数组。

我在下面构建了一个示例，使用您提供的 JSON 字符串来演示这一点，但我将把样式留给您。

var data = [{"id":"1","type":"Beverage","name":"Orange Juice","quantity":"10","barcode":null,"detail":"1 Ltr Bottle"},{"id":"3","type":"Beverage","name":"Apple Juice","quantity":"10","barcode":null,"detail":"1 Ltr Bottle"},{"id":"4","type":"Beverage","name":"Mango Juice","quantity":"10","barcode":null,"detail":"1 Ltr Bottle"},{"id":"5","type":"Beverage","name":"Cranberry Juice","quantity":"20","barcode":null,"detail":"2 Ltr Bottle"},{"id":"6","type":"Beverage","name":"Strawberry Juice","quantity":"20","barcode":null,"detail":"2 Ltr Bottle"},{"id":"7","type":"Beverage","name":"Pear Juice","quantity":"15","barcode":null,"detail":"1.5 Ltr Bottle"},{"id":"8","type":"Canned Food","name":"Baked Beans","quantity":"10","barcode":null,"detail":"300g"},{"id":"9","type":"Canned Food","name":"Sardines","quantity":"10","barcode":null,"detail":"300g"},{"id":"10","type":"Canned Food","name":"Hot Dog","quantity":"20","barcode":null,"detail":""},{"id":"11","type":"Canned Food","name":"Sweet Corn","quantity":"20","barcode":null,"detail":"500g"},{"id":"12","type":"Canned Food","name":"Sweet Potato","quantity":"15","barcode":null,"detail":null},{"id":"13","type":"Chocolate","name":"Carbury","quantity":"10","barcode":null,"detail":"50g"},{"id":"14","type":"Chocolate","name":"Lindt","quantity":"10","barcode":null,"detail":"50g"},{"id":"15","type":"Chocolate","name":"Kit Kat","quantity":"20","barcode":null,"detail":"70g"},{"id":"16","type":"Chocolate","name":"Mars","quantity":"20","barcode":null,"detail":null},{"id":"17","type":"Chocolate","name":"Toblerone","quantity":"15","barcode":null,"detail":"500g"}]
var result = {};
var list = $('#view-list');

// create the result object
for(var i in data) (result[data[i].type]||(result[data[i].type]=[])).push(data[i]);

// iterate the result object
for(var i in result) {
    // make the outer collapsible
    var outer = $("<div data-role='collapsible'/>");

    // append the title for this type
    outer.append("<h1>" + i + "</h1>");

    // iterate the items for this type
    for(var j in result[i]) (function(item){
        // make the inner collapsible
        var inner = $("<div data-role='collapsible'/>");
        inner.append("<h2>" + item.name + "</h2>");
        inner.append("<p>Quantity: " + item.quantity);
        inner.append("<p>Barcode: " + item.barcode);
        inner.append("<p>Detail: " + item.detail);
        outer.append(inner);
    })(result[i][j]);
    list.append(outer);
}

/* For demo purposes only */
* { margin: 0 } [data-role="collapsible"] {  border: 1px solid #666; margin: 5px; }

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<article data-role="content">
    <div data-role="collapsible" data-collapsed="false" id="view-list">
    </div>
</article>