Как построить 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

Если вы просто хотите создать свой HTML, вы можете использовать Jquery $ .each

var html = '';
$.each(list, function(i, el){
    html += '<li>com_id:' + el.com_id + ' <span>' + el.text + '</span></li>';
});

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

Answer 2

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 );