按Key为对象元素生成新Div并渲染对应值的技术问题

原代码核心问题 #

1. groupBy函数逻辑缺陷：首次创建分类数组时，未将当前配料对象推入数组，导致每个分类的第一个配料丢失
2. forEach无返回值导致undefined：用forEach遍历配料数组时，该方法不会返回任何值，因此valItem始终为undefined
3. 数组直接拼接导致格式错误：Object.entries.map返回的HTML字符串数组直接赋值给innerHTML时，会自动添加逗号分隔符

修复后的完整代码 #

function groupBy(objectArray, property) {
  return objectArray.reduce((acc, obj) => {
    const key = obj[property];
    // 首次创建分类数组时直接推入当前对象，无需else分支
    if (!acc[key]) {
      acc[key] = [obj];
    } else {
      acc[key].push(obj);
    }
    return acc;
  }, {});
}

menuArray.forEach((item) => {
  const groupedByCategory = groupBy(item.ingredients, "category");

  const resultsToRender = Object.entries(groupedByCategory).map(
    ([key, value]) => {
      // 用map生成每个配料的HTML字符串，再拼接成整体
      const toppingsHtml = value.map(val => `
        <div class="topping-item">
          <span>${val.item}</span>
          <span>$${val.price}</span>
        </div>
      `).join('');
      
      return `
        <div class="topping-category">
            <h2>${key}</h2>
            ${toppingsHtml}
        </div>
      `;
    }
  ).join(''); // 将分类HTML数组拼接成单个字符串

  document.getElementById("toppings-list").innerHTML += resultsToRender;
});

关键修复说明 #

1. 修复groupBy函数：首次创建分类数组时，直接将当前对象作为数组初始值（acc[key] = [obj]），确保第一个配料不会丢失
2. 替换forEach为map：用map遍历配料数组，生成每个配料的HTML片段，再通过join('')拼接成无分隔符的字符串
3. 拼接分类数组：将Object.entries.map返回的分类HTML数组用join('')拼接，避免出现逗号分隔符
4. 完善配料渲染结构：添加了价格展示，用嵌套div优化布局，方便后续样式调整

内容的提问来源于stack exchange，提问作者christine