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

当前正在从服务器加载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>

---

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

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

它所做的是迭代JSON数组，对于每个项，它将在结果对象中为该类型创建一个新数组（如果它不存在），然后将当前项附加到该类型数组中

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

var data=[{“id”：“1”，“type”：“饮料”，“name”：“橙汁”，“数量”：“10”，“条形码”：null，“细节”：“1ltr瓶”}，{“id”：“3”，“type”：“饮料”，“name”：“苹果汁”，“数量”：“10”，“条形码”：null，“细节”：“1ltr瓶”}，{“id”：“4”，“type”：“饮料”，“name”：“芒果汁”，“数量”：“10”，“条形码”：null，“细节”：“1ltr瓶”}，{“id”：“5”，“type”：“饮料”，“名称”：“蔓越莓汁”，“数量”：“20”，“条形码”：空，“细节”：“2 Ltr瓶”}，{“id”：“6”，“类型”：“饮料”，“名称”：“草莓汁”，“数量”：“20”，“条形码”：空，“细节”：“2 Ltr瓶”}，{“id”：“7”，“类型”：“饮料”，“名称”：“梨汁”，“数量”：“15”，“条形码”：空，“细节”：“1.5 Ltr瓶”}，{“id”：“8”，“类型”：“罐头食品”，“名称”：“烤豆”、“数量”：“10”、“条形码”：“空”、“细节”：“300g”}，{“id”：“9”、“类型”：“罐头食品”、“名称”：“沙丁鱼”、“数量”：“10”、“条形码”：“空”、“细节”：“300g”}，{“id”：“10”、“类型”：“罐头食品”、“名称”：“热狗”、“数量”：“20”、“条形码”：“空”、“细节”：“}，{“id”：“11”、“类型”：“罐头食品”、“名称”：“甜玉米”、“数量”：“20”、“条形码”：“空”、“细节”：“500g”“}，{id:”12“，”类型“：”罐装食品“，”名称“：”红薯“，”数量“，”15“，”条形码“，”空“，”细节“，”空“，”类型“，”巧克力“，”名称“，”15“，”数量“，”10“，”条形码“，”空“，”细节“，”50g“，”id“，”15“，”类型“，”巧克力“，”名称“：”Kit Kat“，”数量“：”“20”，“条形码”：null，“细节”：“70g”}，{“id”：“16”，“类型”：“巧克力”，“名称”：“火星”，“数量”：“20”，“条形码”：null，“细节”：“null”}，{“id”：“17”，“类型”：“巧克力”，“名称”：“托勃龙”，“数量”：“15”，“条形码”：null，“细节”：“500g”}]
var result={}；
变量列表=$（“#视图列表”）；
//创建结果对象
对于（数据中的变量i）（结果[data[i].type]| |（结果[data[i].type]=[]））.push（数据[i]）；
//迭代结果对象
for（结果中的var i）{
//使外部可折叠
外部变量=$（“”）；
//附加此类型的标题
附加（“+i+”）；
//迭代此类型的项
对于（结果[i]中的var j）（函数（项）{
//使内部可折叠
内部变量=$（“”）；
inner.append（“+item.name+”）；
内.追加（数量：“+项.数量）；
内部.append（Barcode:+item.Barcode）；
内部.append（Detail:+item.Detail）；
外部。附加（内部）；
})（结果[i][j]）；
列表。追加（外部）；
}

/*仅用于演示目的*/
*{margin:0}[data role=“collapsible”]{border:1px solid#666；margin:5px；}

您能提供一个示例JSON字符串吗？我已经编辑并添加了我正在访问的示例JSON字符串。需要先将您的数据映射到组数组中…无论是在服务器上还是在收到数据时使用javascript。我可以得到一个示例吗？请告诉我：

{groups:[{type:“Beverage”，items:[]}，{type:“罐头食品”，items:[]}

。然后在每个组上循环，并对项目使用嵌套循环

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

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