如何读取JSON文件数据到JavaScript并渲染至HTML页面，排查代码取值异常问题

架构老林

2026-10-6

问题原因

你的代码存在4个核心错误导致无法正确读取JSON数据：

JSON.parse()参数错误：你传入了未赋值的animals变量，应该传入你从文件读取到的原始JSON字符串
循环长度判断错误：解析后的根数据是对象而非数组，animals.length永远为undefined，正确的循环长度是狗数组的长度
数据层级引用错误：你给出的JSON结构中，狗数组的完整层级是根对象.animals.dogs，你漏了第一层的animals属性
JSON结构本身有问题：同个对象内重复定义了dogType字段，后面的值会覆盖前面的值，建议修改为dogBreed（品种）和dogSize（体型）区分

修复后代码示例

1. 标准fetch读取本地JSON文件+渲染逻辑

// 读取本地JSON文件，替换为你自己的JSON文件路径
fetch('./animals.json')
  .then(res => res.json())
  .then(data => {
    // 先取出狗数组
    const dogsList = data.animals.dogs
    // 这里替换为你自己提前定义的要匹配的dog id数组
    const targetDogIds = ['DW-001']
    // 循环匹配渲染
    for(let i = 0; i < dogsList.length; i++) {
      if(targetDogIds.includes(dogsList[i].dogId)) {
        item.innerHTML += `<li>${dogsList[i].dogName}</li>`
      }
    }
  })

2. 手动解析已获取的JSON字符串

// jsonStr替换为你拿到的原始JSON字符串
const data = JSON.parse(jsonStr)
const dogsList = data.animals.dogs
// 替换为你自己的dog id数组
const targetDogIds = ['DW-001']
for(let i = 0; i < dogsList.length; i++) {
  if(targetDogIds.includes(dogsList[i].dogId)) {
    item.innerHTML += `<li>${dogsList[i].dogName}</li>`
  }
}