File size: 3,086 Bytes
466c373 7094cc7 c6ddee3 7094cc7 c6ddee3 7094cc7 c6ddee3 7094cc7 c6ddee3 7094cc7 c6ddee3 7094cc7 c6ddee3 7094cc7 c6ddee3 01894d5 c6ddee3 01894d5 c6ddee3 7094cc7 c6ddee3 7094cc7 c6ddee3 7094cc7 c6ddee3 7094cc7 c6ddee3 7094cc7 c6ddee3 7094cc7 c6ddee3 7094cc7 c6ddee3 7094cc7 c6ddee3 7094cc7 c6ddee3 466c373 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 |
<!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">
<!-- JSON data will be displayed here -->
</div>
<script>
let jsonObjects;
async function fetchData() {
const response = await fetch('your_data_file.txt'); // Replace 'your_data_file.txt' with the actual file path
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];
// Update the display container
displayContainer.innerHTML = `<div class="json-container">${renderJson(jsonObject)}</div>`;
} else {
displayContainer.innerHTML = ''; // Clear the display if no option is selected
}
}
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;
}
// Initialize the page
async function initializePage() {
await fetchData();
populateDropdown();
updateDisplay();
}
initializePage();
</script>
</body>
</html>
|