Javascript 格式化可折叠集的JSON打印输出

我正在使用jquerymobile打印通过Ajax从服务器获得的一组数据。我目前能够获得它，但当我尝试将信息输入到可折叠的集合格式时，它不适合

我希望布局如下，信息存储在下拉菜单中，并在单击时显示

但当前，信息显示在下拉菜单外，如下所示：

我有没有办法纠正这个问题。我试着将id值移动到不同的div标记上，但是没有帮助。我的代码如下。谢谢你的指导

HTML

利益1
下一次支出

日期：3月27日

天数：0

金额：47.00

Javascript

$.getJSON("http://www.mocky.io/v2/533604e8f5aa39b117bc2d26",function(data)
{
    //Loop for each element on the data
    $.each(data,function(elem)
    {
        //Create the h1 and the other elements appending them to benefits List
        $("<h1/>",
        {
            text:data[elem].reference
        }).appendTo("#benefitsList")

        $("<p/>",
        {
            text:"Date: "+ data[elem].due.date
        }).appendTo("#benefitsList")

        $("<p/>",
        {
            text:"Days: "+ data[elem].due.days
        }).appendTo("#benefitsList")

        $("<p/>",
        {
            text:"Amount: "+ data[elem].amount
        }).appendTo("#benefitsList")
    })
})

$.getJSON（“http://www.mocky.io/v2/533604e8f5aa39b117bc2d26，函数（数据）
{
//数据上每个元素的循环
$。每个（数据、功能（元素）
{
//创建h1和附加到福利列表的其他元素
$("",
{
文本：数据[elem]。参考
}).附于（“#受益名单”）
$（“
”，
{
文本：“日期：”+数据[elem].due.Date
}).附于（“#受益名单”）
$（“
”，
{
文本：“天数：”+数据[elem].due.Days
}).附于（“#受益名单”）
$（“
”，
{
文本：“金额：”+数据[elem]。金额
}).附于（“#受益名单”）
})
})

编辑：

重复条目

---

您应该稍微更改id的位置

<article data-role="content">
    <div data-role="collapsible-set" id="benefitsList">
        <div data-role="collapsible">
            <!--hard coded just for reference. I will be removing these h1,p tags-->
             <h1>Benefit 1</h1>

            <p>Next Payout</p>
            <p>Date: 27 Mar</p>
            <p>Days: 0</p>
            <p>Amount: 47.00</p>
        </div>
    </div>
</article>

---

您缺少结束标记。我已编辑了代码。我复印的时候没看到那个标签。这并不是造成格式不好的原因。我已经为此做了一个角度指示，谢谢你的回复。你的代码可以工作。但每次我进入福利页面，它都以一个重复条目开始。正如在一开始，我得到6个福利条目（1,2,3,1,2,3），而不是3个。当我点击刷新按钮时，它正确显示，如图所示，它显示了3个优点。我在按你的密码办事。知道为什么吗？添加了重复条目的图像以供参考。谢谢，找到问题了。当我在$（document）中运行命令时，它会导致重复。在（“pagecreate”，function（）。我想使用pagecreate在每次加载页面时更新页面上的信息。我想我找到了另一种方法。
<article data-role="content">
    <div data-role="collapsible-set" id="benefitsList">
        <div data-role="collapsible">
            <!--hard coded just for reference. I will be removing these h1,p tags-->
             <h1>Benefit 1</h1>

            <p>Next Payout</p>
            <p>Date: 27 Mar</p>
            <p>Days: 0</p>
            <p>Amount: 47.00</p>
        </div>
    </div>
</article>

$.getJSON("http://www.mocky.io/v2/533604e8f5aa39b117bc2d26", function (data) {
    //Loop for each element on the data
    $.each(data, function (elem) {
        // create wrapper div
        var wrap = $("<div/>").attr('data-role', 'collapsible');
        //Create the h1 and the other elements appending them to benefits List
        $("<h1/>", {
            text: data[elem].reference
        }).appendTo(wrap);

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

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

        $("<p/>", {
            text: "Amount: " + data[elem].amount
        }).appendTo(wrap);
        wrap.appendTo('#benefitsList');
    });
    // finally refresh the list to recreate
    $( "#benefitsList" ).collapsibleset( "refresh" );
});