javascript - 如何通过映射普通id构造html列表

Question

我在构建 html 列表时遇到问题。

我期待与(下面的预期输出(静态):)所示相同的结果

问题:具有相同值的comm_id应该构造1次

这是我正在尝试的

var list = [
  {'com_id':12,'text':'Apple'},
  {'com_id':12,'text':'Banana'},
  {'com_id':91,'text':'cake'},
  {'com_id':91,'text':'cup cake'},
];

var dataMap = {}, str = '';

for(var i = 0; i < list.length; i++){
   if(!dataMap[list[i]['com_id']]) {
      dataMap[list[i]['com_id']] = list[i];
      str += '<li>com_id:'+list[i]['com_id']+'    <span>'+list[i]['text']+'</span><span>'+list[i]['text']+'</span></li>';
   }
}

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

span{
  display:inline-block;
  padding:10px;
  margin:2px;
  background:#eee;
  border-radius:20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dynamic_const">
  
</div>

<p>Expected output(Static) Below:</p>

<div id="static">
  <ul>
      <li>com_id:12      <span>Apple</span><span>Banana</span></li>
      <li>com_id:91      <span>cake</span><span>cup cake</span></li>
  </ul>
</div>

请帮助我提前谢谢!!!

Answer 1

var list = [
  {'com_id':12,'text':'Apple'},
  {'com_id':12,'text':'Banana'},
  {'com_id':91,'text':'cake'},
  {'com_id':91,'text':'cup cake'}
];

// group the text for each com_id
var reducedList = list.reduce( ( elements, element ) => {
  if ( !elements[ element.com_id ] ) {
    elements[ element.com_id ] = { com_id: element.com_id, text: [] }
  }
  
  elements[ element.com_id ].text.push( element.text );

  return elements;
}, {} );

console.log( reducedList );

// build the html

var newHTML = Object.values( reducedList ).map( element => {
  return `<li>com_id:${ element.com_id }<span>${ element.text.join( '</span><span>' ) }</span></li>`;
} );

console.log( newHTML );