I have have tried this over and over again and still can't get it right. I have tried making my data.json a data.js file and that didn't work in chrome and got the first SS errors. Next I tried it on a http.server as data.json and data.js and got the second SS error. Could it be that since the json has 74,045 lines of codes and descriptions be causing the error on the http.server? Would it work if I put it into two sections, such as let json = {codes:[], descriptions:[]}? Would this solve the timeout error on the http.server; this would make it searching easier easier and take less time right? My js code can be found below along with the two SS. It also won't display any results on the html once the search button is clicked. Am i missing a display function or something in the js?
// 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);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;
}<!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>
