Codelab Editor
Free Online HTML Editor
Run
Learn JSON
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Fetch JSON Data from File | TutsInsider</title> <style> body { font-family: Arial, sans-serif; padding: 20px; background-color: #f4f4f4; } h2 { color: #333; } ul { list-style-type: none; padding: 0; } li { background: #fff; margin: 8px 0; padding: 10px; border-left: 4px solid #007BFF; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } </style> </head> <body> <h2>JSON User List</h2> <p>Below is the data fetched from the <code>users-data.json</code> file:</p> <div id="demo"></div> <script> fetch('json-intro.json') .then(response => response.json()) .then(users => { const container = document.getElementById('demo'); const ul = document.createElement('ul'); users.forEach(user => { const li = document.createElement('li'); li.textContent = `${user.name} — ${user.email} — ${user.city}, ${user.country}`; ul.appendChild(li); }); container.appendChild(ul); }) .catch(error => console.error('Error loading json-intro.json:', error)); </script> </body> </html>
Editor Commands
Ctrl
F
Find
Ctrl
G
Find Next
Ctrl
⇧
G
Find Previous
Ctrl
⇧
F
Find & Replace
Ctrl
]
Indent Code Right
Ctrl
[
Indent Code Left
⇧
Tab
Auto Indent Code
Ctrl
/
Line Comment
Ctrl
Alt
/
Block Comment
TutsInsider Actions
Alt
S
Run Code
Ctrl
C
Copy Editor Code
Ctrl
A
Select All Editor Code
Ctrl
S
Save/Download
Ctrl
Alt
X
Rotate
Ctrl
Alt
T
Switch Theme
Ctrl
⇧
C
Open Console
Esc
Close Console