如何在更改另一个列表组时更改 Bootstrap 列表组？

Question

我有 2 个列表组。第二个基于 json 文件中的条件（代码中有 2 个 if 语句）

This fiddle https://jsfiddle.net/andernathan/fL3cwoa2/32/ 是我正在尝试做的一个非常简化的版本。

我的问题是：如何根据 if 语句中的条件筛选列表组 2 中显示的内容？

谢谢......一如既往！

  const activities1 = [];
  const activities2 = [];

    var json = {"Tasks":[{"Subject":"Howdy their"},{"Subject":"Howdy 
    there"},{"Subject":"Howdy they're"}]}

    var obj = json.Tasks;

    for (var i = 0; i < obj.length; i++) {
    activitySub = (obj[i].Subject);
  
    if (activitySub != "Howdy their") {
      activities1.push({
        activitySub,
     })
    }
    if (activitySub === "Howdy their") {
      activities2.push({
        activitySub,
     })
    }
   }
    console.log(JSON.parse(JSON.stringify(activities1)));
    console.log(JSON.parse(JSON.stringify(activities2)));

    const html = activities1.map(obj => {
      let item = document.querySelector('#template').innerHTML;
      item = item.replace('{sub}', obj.activitySub);
      return item;
    });

    document.querySelector('#list').innerHTML = html.join('');

HTML

   <ul class="list-group">
      <li class="active">
       <a href="#"> Howdy</a>
      </li>
      <li>
       <a href="#"> Howdee</a>
      </li>
    </ul>
    <ul class="list-group">
     <div id="list"></div>
      <template id="template">
       <h5 class="media-heading">{sub}</h5>
      </template>
    </ul>