File size: 3,398 Bytes
466c373 7094cc7 c6ddee3 7094cc7 c6ddee3 7094cc7 c6ddee3 7094cc7 c6ddee3 7094cc7 c6ddee3 7094cc7 c6ddee3 7094cc7 c6ddee3 1fb9242 01894d5 1fb9242 01894d5 1fb9242 01894d5 c6ddee3 7094cc7 c6ddee3 1fb9242 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 105 106 107 108 109 110 111 112 113 |
<!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 jsonDataArray = [];
async function fetchData() {
try {
const response = await fetch('characters.json'); // Corrected file name
if (!response.ok) {
throw new Error(`Failed to fetch data. Status: ${response.status}`);
}
const rawData = await response.text();
const lines = rawData.split('\n').filter(Boolean);
jsonDataArray = lines.map(line => JSON.parse(line));
} catch (error) {
console.error('Fetch error:', error.message);
}
}
function populateDropdown() {
const selector = document.getElementById('jsonSelector');
jsonDataArray.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 = jsonDataArray[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>
|