|
<!DOCTYPE html> |
|
<html lang="en"> |
|
|
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>JSON Viewer with Selector</title> |
|
<style> |
|
body { |
|
font-family: Arial, sans-serif; |
|
margin: 20px; |
|
} |
|
|
|
.json-container { |
|
border: 1px solid #ccc; |
|
padding: 10px; |
|
margin-bottom: 10px; |
|
} |
|
|
|
.json-key { |
|
font-weight: bold; |
|
} |
|
</style> |
|
</head> |
|
|
|
<body> |
|
|
|
<form id="jsonSelectorForm"> |
|
<label for="jsonSelector">Choose Data to Display:</label> |
|
<select id="jsonSelector" onchange="updateDisplay()"></select> |
|
</form> |
|
|
|
<div id="jsonDisplayContainer"> |
|
|
|
</div> |
|
|
|
<script> |
|
let jsonObjects; |
|
|
|
async function fetchData() { |
|
const response = await fetch('your_data_file.txt'); |
|
const data = await response.text(); |
|
jsonObjects = data.split('\n').filter(Boolean).map(JSON.parse); |
|
} |
|
|
|
function populateDropdown() { |
|
const selector = document.getElementById('jsonSelector'); |
|
|
|
jsonObjects.forEach((_, index) => { |
|
const option = document.createElement('option'); |
|
option.value = index; |
|
option.text = `Object ${index + 1}`; |
|
selector.add(option); |
|
}); |
|
} |
|
|
|
function updateDisplay() { |
|
const selector = document.getElementById('jsonSelector'); |
|
const displayContainer = document.getElementById('jsonDisplayContainer'); |
|
const selectedIndex = selector.value; |
|
|
|
if (selectedIndex >= 0) { |
|
const jsonObject = jsonObjects[selectedIndex]; |
|
|
|
|
|
displayContainer.innerHTML = `<div class="json-container">${renderJson(jsonObject)}</div>`; |
|
} else { |
|
displayContainer.innerHTML = ''; |
|
} |
|
} |
|
|
|
function renderJson(obj) { |
|
const orderedKeys = ['name', 'age', 'gender', "race", "education", "occupation", "expertise", "hobby", "positive_personality", "negative_personality"]; |
|
let html = ''; |
|
|
|
orderedKeys.forEach(key => { |
|
if (key in obj) { |
|
html += `<div><span class="json-key">${key}:</span> ${obj[key]}</div>`; |
|
} |
|
}); |
|
|
|
for (const [key, value] of Object.entries(obj)) { |
|
if (!orderedKeys.includes(key)) { |
|
html += `<div><span class="json-key">${key}:</span> ${value}</div>`; |
|
} |
|
} |
|
|
|
return html; |
|
} |
|
|
|
|
|
async function initializePage() { |
|
await fetchData(); |
|
populateDropdown(); |
|
updateDisplay(); |
|
} |
|
|
|
initializePage(); |
|
</script> |
|
|
|
</body> |
|
|
|
</html> |
|
|
