javascript - 格式化 JSON 打印输出以获取可折叠集

Question

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

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

但目前信息显示在下拉菜单之外，如下所示:

有什么办法可以纠正这个问题吗？我尝试将 id 值移动到不同的 div 标签，但这没有帮助。我的代码如下。谢谢指导。

HTML

<article data-role="content" >
    <div data-role="collapsible-set" >
        <div data-role="collapsible" id="benefitsList">
            <!--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>

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

编辑:

重复条目

Answer 1

您应该对 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>

以及 JavaScript 中的一些其他调整

$.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" );
});

DEMO