佛罗里达景点网站JSON数据不显示，请求语法错误排查帮助

问题概述 #

开发名为Florida Tempatations的佛罗里达景点展示网站时，尝试通过fetch API加载attractions.json中的景点数据并展示，但内容始终无法正常显示，控制台报SyntaxError错误。

错误原因分析 #

1. JSON文件语法错误 #

attractions.json中最后一个景点对象末尾多了一个逗号，JSON规范不允许对象或数组的最后一项后加尾逗号，这会导致解析失败。

2. JavaScript选择器与DOM操作错误 #

• 错误使用document.querySelector('attractions')，页面中没有名为attractions的标签，应该选择id为attractions-container的div元素，正确写法是document.querySelector('#attractions-container')。
• li元素不能直接作为div的子元素，需要先创建一个ul列表容器，再将li添加到ul中。

3. 数据遍历对象错误 #

JSON数据的景点数组嵌套在attractions字段下，应该遍历data.attractions而非直接遍历data。

修复步骤与代码 #

修复后的attractions.json #

移除最后一个景点对象的尾逗号：

{ "attractions":[ 
  {
    "name": "Walt Disney World",    "location": "Orlando",    "category": "Theme Park"
  },
  {   
    "name": "Universal Studios Florida",    "location": "Orlando",    "category": "Theme Park"
  },
   {    "name": "Kennedy Space Center",    "location": "Cape Canaveral",    "category": "Science and Technology"
   },
  {"name": "South Beach",    "location": "Miami",    "category": "Beach"
  },
   {    "name": "Everglades National Park",    "location": "Homestead",    "category": "National Park"
   }
  ]
}

修复后的script.js #

修正选择器、创建ul容器并正确遍历景点数组：

fetch('attractions.json')
  .then(response => response.json())
  .then(data => {
    const container = document.querySelector('#attractions-container');
    // 创建ul列表容器
    const list = document.createElement('ul');
    // 遍历attractions数组
    data.attractions.forEach(attraction => {
      const item = document.createElement('li');
      item.innerHTML = `<h2>${attraction.name}</h2>
        <p>Location: ${attraction.location}</p>
        <p>Category: ${attraction.category}</p>`;
      list.appendChild(item);
    });
    // 将ul添加到容器中
    container.appendChild(list);
  })
  .catch(error => {
    console.error('Error:', error);
  });

可选样式调整（style.css） #

为了让景点列表更美观，可添加以下样式：

#attractions-container ul {
  list-style: none;
  padding: 20px;
}

#attractions-container li {
  background-color: rgba(255,255,255,0.8);
  margin: 15px auto;
  padding: 20px;
  border-radius: 8px;
  max-width: 600px;
  color: #333;
  text-align: left;
}

#attractions-container h2 {
  color: #e7902c;
  margin-bottom: 10px;
}

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