ICD-10搜索页面超时及无搜索结果问题排查求助

问题场景 #

多次尝试仍未解决以下问题：

• 将data.json改为data.js在Chrome浏览器中触发报错
• 使用Python的http.server加载data.json或data.js时同样报错

怀疑是这份JSON包含74045行代码与描述内容，因体积过大导致加载超时。想请教：将JSON拆分为{codes:[], descriptions:[]}的结构能否解决加载问题？此外，点击搜索按钮后页面完全无结果展示，是否是缺少相关的JS显示逻辑？

报错说明 #

1. Chrome中替换为data.js时，控制台提示语法错误
2. 用http.server加载时，出现资源加载失败/超时类错误

代码实现 #

HTML代码

<!DOCTYPE html>
<html>
<head>
    <title>ICD-10 Code and Description Search</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="stylesheet.css" type="text/css"/>
</head>
<body onload="loadJSON()">
    <h1>ICD-10 Code/Description Search</h1>
    <input type="text" id="search-input" placeholder="Enter code or description">
    <button id="search-button">Search</button>
    <div id="output-area"></div>
    
    <script src="data.json"></script>
    <script src="script.js"></script>
</body>
</html>

CSS代码

body{
    background-color: lightblue;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.content-wrapper{
    padding: 10px 30px;
}
p{
    text-align: justify;
}
h1{
    text-align: center;
}
.highlight{
    font-weight: 700;
    color: forestgreen;
}
h1, h2{
    font-weight: 400;
}

ul li{
    list-style-type: square;
    margin-bottom: 10px;
    margin-left: 50px;
}

JavaScript代码

// Global variable to store the loaded JSON data
let jsonData = [];

// Function to load the JSON data
function loadJSON() {
  fetch("data.json")
    .then((response) => response.json())
    .then((data) => {
      jsonData = data;
    })
    .catch((error) => {
      console.error(error);
    });
}

// Function to filter and display the JSON data
function search() {
  const searchInput = document.getElementById('search-input').value;
  const outputArea = document.getElementById('output-area');
  console.log(searchInput);

  // Check if jsonData is undefined or empty before filtering
  if (jsonData && jsonData.length > 0) {
    // Filtering the JSON data based on the search query
    const filteredData = jsonData.filter(
      (item) => item.name && item.name.includes(searchInput)
    );

    // Clearing the output area
    outputArea.innerHTML = '';

    // Displaying the filtered data
    filteredData.forEach((item) => {
      const resultElement = document.createElement('p');
      resultElement.textContent = item.name;
      outputArea.appendChild(resultElement);
      console.log(resultElement);
    });
  }
}

// Load JSON data when the page loads
window.onload = function() {
  loadJSON();
};

// Event listener for search button click
document.getElementById('search-button').addEventListener('click', search);

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