Javascript 如何使用公共id映射来构造html列表

我面临着构建html列表的问题

我期望得到如下所示的结果（预期输出（静态）：）

问题：

具有相同值的comm\u id

应构造1次

这就是我正在尝试的

var列表=[
{'com_id'：12，'text'：'Apple'}，
{'com_id'：12，'text'：'Banana'}，
{'com_id'：91，'text'：'cake'}，
{'com_id'：91，'text'：'cup cake'}，
];
var dataMap={}，str=''；
对于（变量i=0；i；
}
}
$（'#dynamic_const'）.html（str）
span{
显示：内联块；
填充：10px；
保证金：2倍；
背景：#eee；
边界半径：20px；
}

预期输出（静态）如下：


com_id:12 AppleBanana
商品编号：91 cakecup蛋糕


var列表=[
{'com_id'：12，'text'：'Apple'}，
{'com_id'：12，'text'：'Banana'}，
{'com_id'：91，'text'：'cake'}，
{'com_id'：91，'text'：'cup cake'}
];
//将每个com_id的文本分组
var reducedList=list.reduce（（元素，元素）=>{
如果（！elements[element.com\u id]）{
elements[element.com\u id]={com\u id:element.com\u id，文本：[]}
}
元素[element.com_id].text.push（element.text）；
返回元素；
}, {} );
console.log（reducedList）；
//构建html
var newHTML=Object.values（reducedList.map）（元素=>{
返回`
com\u id:${element.com\u id}${element.text.join（''）}
`；
} );
log（newHTML）如果您只想构建HTML，可以使用

var html=''；
$。每个（列表、函数（i、el）{
html+='
com\u id:'+el.com\u id+'+el.text+'
'；
});
$（'#dynamic_const'）.html（html）；
if语句将在数据映射中存在com_id后忽略元素
var html = '';
$.each(list, function(i, el){
    html += '<li>com_id:' + el.com_id + ' <span>' + el.text + '</span></li>';
});

$('#dynamic_const').html(html);