React中如何获取JSON文件数据并按升序渲染id与name字段

步骤1：获取JSON数据 #

如果是本地JSON文件（比如命名为data.json），可以用fetch方法获取，代码示例：

// 读取本地JSON文件
fetch('./data.json')
  .then(res => res.json())
  .then(rawData => {
    // 拿到原始数据后执行后续处理
    processAndRender(rawData)
  })

如果是直接定义在JS里的JSON数组，可以直接赋值使用：

const rawData = [{"id": 0,"name": "Vernon Dunham","company": "Qualcore","email": "vernon.dunham@qualcore.com"}, {"id": 1,"name": "Dori Neal","company": "Sunopia","email": "dori.neal@sunopia.com"}, {"id": 2,"name": "Rico Muldoon","company": "Airconix","email": "rico.muldoon@airconix.com"}]

步骤2：数据预处理：提取指定字段 + 升序排序 #

• 提取字段：用数组map方法，仅保留需要的id和name字段
• 升序排序：用数组sort方法，支持按id升序或者name字母/拼音升序两种场景

处理函数示例：

function processAndRender(rawData) {
  // 1. 提取仅id和name字段
  const filteredData = rawData.map(item => ({
    id: item.id,
    name: item.name
  }))

  // 2. 升序排序，二选一即可
  // 方案A：按id升序
  const sortedData = filteredData.sort((a, b) => a.id - b.id)
  // 方案B：按name字母/拼音升序
  // const sortedData = filteredData.sort((a, b) => a.name.localeCompare(b.name, 'en'))
  // 如果是中文name，把'en'换成'zh-CN'即可

  // 3. 执行渲染
  renderData(sortedData)
}

步骤3：渲染到页面 #

最简单的原生DOM渲染示例，假设页面有个id为list-container的容器：

<!-- 页面容器 -->
<ul id="list-container"></ul>

function renderData(sortedData) {
  const container = document.getElementById('list-container')
  // 拼接HTML字符串
  let htmlStr = ''
  sortedData.forEach(item => {
    htmlStr += `<li>ID：${item.id}，姓名：${item.name}</li>`
  })
  // 插入到页面
  container.innerHTML = htmlStr
}

渲染效果参考 #

按id升序的输出结果：

• ID：0，姓名：Vernon Dunham
• ID：1，姓名：Dori Neal
• ID：2，姓名：Rico Muldoon

按name字母升序的输出结果：

• ID：1，姓名：Dori Neal
• ID：2，姓名：Rico Muldoon
• ID：0，姓名：Vernon Dunham

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