如何匹配数组字符串提取嵌套JSON数组值并在HTML/JS中展示

问题说明 #

需要将多维数组jsonArray中每个玩家的title、指定thumbnail，与数组array2中对应索引的玩家详情匹配，最终生成符合格式的HTML列表。

目标数组 #

第一个数组（玩家信息）：

const jsonArray = [
  [{
    "position": "1",
    "title": "player 1",
    "thumbnail": "www.picuture.com/jpeg"
  }, {
    "position": "2",
    "title": "player 1",
    "thumbnail": "www.picuture2.com/jpeg"
  }],
  [{
    "position": "1",
    "title": "player 2",
    "thumbnail": "www.picuture.com/jpeg"
  }, {
    "position": "2",
    "title": "player 2",
    "thumbnail": "www.picuture2.com/jpeg"
  }],
  [{
    "position": "1",
    "title": "player 3",
    "thumbnail": "www.picuture1.com/jpeg"
  }, {
    "position": "2",
    "title": "player 3",
    "thumbnail": "www.picuture2.com/jpeg"
  }]
];

第二个数组（玩家详情）：

const array2 = ["player1_details", "player2_details", "player3_details"];

实现代码 #

用JavaScript实现数组匹配与HTML生成：

function generatePlayerList() {
  let html = '<ul>\n';
  
  jsonArray.forEach((playerGroup, index) => {
    // 提取当前玩家组中position为1的项（兜底取第一个元素）
    const targetPlayer = playerGroup.find(item => item.position === "1") || playerGroup[0];
    const { title, thumbnail } = targetPlayer;
    const details = array2[index];
    
    // 拼接列表项
    html += `  <li>${title}</li><li>${thumbnail}</li><li>${details}</li>\n`;
  });
  
  html += '</ul>';
  return html;
}

// 执行函数并输出结果
console.log(generatePlayerList());

代码说明 #

1. 数组遍历：通过forEach遍历jsonArray，利用索引index关联array2中对应的玩家详情。
2. 目标数据提取：从每个玩家组中筛选出position为"1"的对象（如果筛选失败则取组内第一个元素），解构出title和thumbnail。
3. HTML拼接：将每个玩家的三个信息分别包装为<li>元素，逐步拼接成完整的<ul>列表。
4. 结果输出：调用函数后会生成符合需求的HTML字符串，可直接插入到页面中使用。

生成的HTML示例 #

运行代码后输出的HTML结构如下（修正了示例中多余的引号问题）：

<ul>
  <li>player 1</li><li>www.picuture.com/jpeg</li><li>player1_details</li>
  <li>player 2</li><li>www.picuture.com/jpeg</li><li>player2_details</li>
  <li>player 3</li><li>www.picuture1.com/jpeg</li><li>player3_details</li>
</ul>

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