JS列表数据无法分两列展示：DESCRIPTION与TYPE分列需求

核心问题分析 #

1. 前端只显示属性值：你的JS模板字符串里用了逗号运算符(prop.toUpperCase() + ': ', obj[prop])，逗号运算符会返回最后一个表达式的结果，导致属性名被丢弃。而控制台能正常输出是因为console.log里的逗号是参数分隔符，不是运算符。
2. columns属性不生效：columns是把列表项按顺序流式填充列，没法实现“左侧全是描述、右侧全是类型”的分组效果，必须换用布局方案。

解决方案步骤 #

1. 修改HTML结构，拆分两个列容器

把原来的单个ul改成带标题的两列布局，分别存放描述和类型：

<div class="result-container">
  <div class="data-column">
    <h3>DESCRIPTION</h3>
    <ul id="desc-list" class="list-group"></ul>
  </div>
  <div class="data-column">
    <h3>TYPE</h3>
    <ul id="type-list" class="list-group"></ul>
  </div>
</div>

2. 调整JS逻辑，分类插入数据

遍历数据时，把DESCRIPTION和TYPE分别插入对应的列表：

// 示例数据，替换成你的实际数据源
const items = [
  { DESCRIPTION: 'The Harvester', TYPE: 'Restaurant' },
  { DESCRIPTION: 'McDonalds', TYPE: 'Fast food' }
];

items.forEach(item => {
  // 插入描述项
  const descItem = `<li class="list-group-item">${item.DESCRIPTION}</li>`;
  document.getElementById('desc-list').insertAdjacentHTML('beforeend', descItem);
  
  // 插入类型项
  const typeItem = `<li class="list-group-item">${item.TYPE}</li>`;
  document.getElementById('type-list').insertAdjacentHTML('beforeend', typeItem);
});

3. 用Flex布局实现两列对齐

替换原来的CSS，用flex实现平分宽度的两列：

.result-container {
  display: flex;
  gap: 30px; /* 两列之间的间距 */
}

.data-column {
  flex: 1; /* 两列宽度自动平分 */
}

.list-group {
  color: white;
  text-align: left;
  list-style: none;
  padding: 0;
  margin: 0;
}

.list-group-item {
  padding: 10px 0;
  border-bottom: 1px solid #555;
}

额外说明 #

如果只是想修复“显示属性名”的问题（不改变单列布局），只需修改模板字符串的写法，去掉逗号运算符：

const markup = `<li class="list-group-item">${prop.toUpperCase()}: ${obj[prop]}</li>`;

但这种方式依然没法实现分组两列，所以推荐前面的拆分容器方案。

内容的提问来源于stack exchange，提问作者e-driver1