Spaces:

KikiQiQi
/

tmp-char

Running

App Files Files Community

KikiQiQi commited on Nov 30, 2023

Commit

c6ddee3

•

1 Parent(s): 6abafd0

Update index.html

Browse files

Files changed (1) hide show

index.html +48 -44

index.html CHANGED Viewed

@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -9,36 +10,35 @@
             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">选择展示数据：</label>
-    <select id="jsonSelector" onchange="updateDisplay()">
-        {% for index in range(json_objects|length) %}
-            <option value="{{ index }}">Object {{ index + 1 }}</option>
-        {% endfor %}
-    </select>
-</form>
-<div id="jsonDisplayContainer">
-    <!-- JSON data will be displayed here -->
-</div>
-<script>
-    let jsonObjects;
         async function fetchData() {
-            const response = await fetch('characters.output.manually'); // Replace 'your_data_file.txt' with the actual file path
             const data = await response.text();
             jsonObjects = data.split('\n').filter(Boolean).map(JSON.parse);
         }
@@ -54,46 +54,50 @@
             });
         }
-    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 = '';
-        // 遍历指定顺序的键，将其对应的键值对添加到 HTML 中
-        orderedKeys.forEach(key => {
-            if (key in obj) {
-                html += `<div><span class="json-key">${key}:</span> ${obj[key]}</div>`;
-            }
-        });
-        // 遍历其他未在指定顺序中的键，将其对应的键值对添加到 HTML 中
-        for (const [key, value] of Object.entries(obj)) {
-            if (!orderedKeys.includes(key)) {
-                html += `<div><span class="json-key">${key}:</span> ${value}</div>`;
             }
         }
-        return html;
-    }
-    // Initial update to display the first JSON object
-    updateDisplay();
-</script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
             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 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>