jquery - 在 JQuery 中动态合并值和绑定(bind)

Question

我在对话框中输出格式为

 ODS
 1234|Hyd
 ODS
 1234|Blore
 ODS
 6847|Pune
 CDS
 1234|Chenni
 CDS
 4854|Delhi

在这里，我想合并所有 ODC 和 CDS，并希望以以下格式显示输出

ODS
1234|Hyd
1234|Blore
6847|Pune
CDS
1234|Chenni
4854|Delhi

我尝试过不同的方式，比如..

    UserAccessPE Contains Values EX: Program = ODS,CDS, MPNID = 1234,6789, Geography = 'Hyd','Pune' ..., In these way
     var programtemp = "";
     var MPNIDtemp = "";

   for (var i = 0; i < UserAccessPE.length; i++) {
        if (UserAccessPE[i].program == UserAccessPE[i + 1].program) {
                programtemp = '<br><div class="Programdiv"> <span> <br>' + UserAccessPE[i].program + '<br /></span></div><br />';

                for (var j = 0 ; j < UserAccessPE.length; j++) {
                    MPNIDtemp = ' <br><div class="mpniddiv"> <span><br>' + UserAccessPE[i].MPNID + ' |  ' + UserAccessPE[i].Geography + '<br/></span></div><br /> ';
                }

                $("#UserAccessDiv").append(programtemp);
                $("#UserAccessDiv").append(MPNIDtemp);


        }

    }

请帮助我...，我几乎完成了动态绑定(bind)值，但无法合并相同的值并绑定(bind)。

Answer 1

如果顺序不正确，您需要确保源数组按 .program 排序。属性:

UserAccessPE.sort(function(a, b) {
    return a.program < b.program;
});

然后将输出构建为 HTML 片段数组，利用 array.reduce()执行循环并为您提供先前的值:

var html = [];
UserAccessPE.reduce(function(prev, current) {
    if(!prev || current.program !== prev.program) {
        html.push('<div class="mdiv Programdiv">' + current.program + '</div>');
    }
    html.push('<div class="mdiv mpniddiv">' + current.MPNID + ' | ' + current.Geography + '</div>');
    return current;
}, null);

// join HTML fragments and append
$("#UserAccessDiv").append(html.join(''));

这里简化了问题中的 HTML，以避免双 div 换行和 <br> s，这两者似乎都是不必要的。无论如何，根据需要重新复杂化。

<强> DEMO

不太清楚你所说的“绑定(bind)”是什么意思，但从你所说的来看，你似乎已经控制住了。