如何解析两个JSON文件、按ID匹配合并数据后展示到UI界面

整体流程分三步：解析JSON、按id关联合并字段、渲染结果到页面，以最常见的前端Web场景为例，实现逻辑如下：

1. 解析JSON文件 #

首先把两个JSON文件的内容读取出来，转成可操作的对象。如果是前端环境，需要通过文件选择控件让用户上传两个JSON文件，用FileReader读取文件内容后，调用JSON.parse()转成JS数组即可；如果是Node.js/后端环境，直接读文件内容后用对应语言的JSON解析方法处理就行。

2. 按id做字段映射合并 #

不要用双层循环遍历两个数组匹配id（数据量稍大时性能很差），推荐先构建id为键的映射表，把时间复杂度降到O(n+m)，参考实现代码：

// 解析得到的两个源数据数组
const productBaseList = [
  {
    "id": 11,
    "name": "Car"
  }
]
const productPriceList = [
  {
    "id": 11,
    "price": 50
  }
]

// 先构建id到价格的映射表
const priceMap = {}
productPriceList.forEach(priceItem => {
  // 注意如果存在重复id，后面的记录会覆盖前面的，有去重需求可以提前处理
  priceMap[priceItem.id] = priceItem.price
})

// 遍历基础产品列表，拼接价格字段
const mergedProductList = productBaseList.map(baseItem => {
  return {
    ...baseItem,
    // 匹配不到价格时给默认值，避免显示undefined
    price: priceMap[baseItem.id] ?? "暂无定价"
  }
})

其他语言的实现逻辑完全一致：把其中一个数组转成id为键的字典/哈希表，再遍历另一个数组取值拼接即可。

3. 把合并结果渲染到UI #

拿到合并后的数组后，直接生成对应DOM插入页面即可，原生JS实现示例：
首先在页面预留展示容器：

<div id="product-show-area"></div>

然后写渲染逻辑：

const showArea = document.getElementById('product-show-area')
// 清空旧内容
showArea.innerHTML = ''

mergedProductList.forEach(product => {
  const productEl = document.createElement('div')
  productEl.style.border = "1px solid #eee"
  productEl.style.padding = "12px"
  productEl.style.margin = "8px 0"
  productEl.innerHTML = `
    <p>产品ID：${product.id}</p>
    <p>产品名称：${product.name}</p>
    <p>产品价格：${typeof product.price === 'number' ? `¥${product.price}` : product.price}</p>
  `
  showArea.appendChild(productEl)
})

注意事项 #

• 浏览器环境受安全限制，不能直接读取本地磁盘的固定路径文件，必须通过文件选择控件由用户主动选择文件才能读取
• 如果数据量超过10万条，建议分批渲染DOM，避免一次性插入大量节点导致页面卡顿
• 如果两个JSON里存在同名字段（比如两个文件都有name字段），提前约定好保留哪一侧的字段值，避免合并时被覆盖

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