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数组，对于每个项目，如果它不存在，它将在结果对象中为该类型创建一个新数组，然后将当前项目附加到该类型数组。 / p>

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

＆＃13;

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);
}

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: