| <!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 jsonDataArray = []; |
| |
| async function fetchData() { |
| try { |
| const response = await fetch('characters.json'); |
| 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]; |
| |
| |
| 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> |
|
|
