解析一个深层次的Json文件，并在前端角度显示数据

// 假设Json文件内容如下
const jsonStr = `{
  "name": "John Doe",
  "age": 25,
  "address": {
    "street": "123 Main St",
    "city": "New York",
    "country": "USA"
  },
  "hobbies": ["reading", "music", "sports"]
}`;

// 解析Json文件
const jsonData = JSON.parse(jsonStr);

// 获取并显示数据
const name = jsonData.name;
const age = jsonData.age;
const street = jsonData.address.street;
const city = jsonData.address.city;
const country = jsonData.address.country;
const hobbies = jsonData.hobbies;

// 假设将数据显示在HTML页面上
const dataContainer = document.getElementById('data-container');
dataContainer.innerHTML = `
  <p>Name: ${name}</p>
  <p>Age: ${age}</p>
  <p>Address: ${street}, ${city}, ${country}</p>
  <p>Hobbies: ${hobbies.join(', ')}</p>
`;

// 结果示例：
// Name: John Doe
// Age: 25
// Address: 123 Main St, New York, USA
// Hobbies: reading, music, sports