LoadFromJSON Example

LoadFromJSON Example -- Source Code

HTML Page -- index.htm

 <!DOCTYPE html>
<html lang="en">
    <head>
        <meta content="text/html; charset=utf-8" 
            http-equiv="Content-Type">
        <title>LoadFromJSON Example</title>
        <link rel="stylesheet" href="styles.css">
        <script src="script.js"></script>
    </head>

    <body>
        <h1>LoadFromJSON Example</h1>
        <input type="file" id="in1"><br><br>
        <button id="btn1">Show Riddles</button>
    </body>
</html>

CSS Sheet -- styles.css

 /* Styles for LoadFromJSON Example */
body { background-color: #E0E0FF; 
       color: #000080; 
       font-family: Tahoma, Verdana, sans-serif; }
h1 { color: #800000; }
li { margin-bottom: 10px; }

JavaScript Script -- script.js

 // LoadFromJSON Example
// Source code file: script.js

var contents;
function loadRiddles(event) {

    // Obtain the single uploaded file.
    var f = event.target.files[0]; 
    if (f) {
        var r = new FileReader( );
        r.onload = function(e) { 
            contents = e.target.result;
        }
        r.readAsText(f);
    }
    else { 
        alert("Failed to load file");
    }
}

function displayRiddles( ) {

    // Convert JSON data to array of objects.
    var riddlesArray = JSON.parse(contents);

    // Display riddles dynamically.
    var orderedList = document.createElement("ol");
    for(let r of riddlesArray) {
        var listItem = document.createElement("li");
        listItem.innerHTML = 
            r.riddle + "<br>" + r.answer;
        orderedList.appendChild(listItem);
    }
    var body = document.querySelector("body");
    body.appendChild(orderedList);
}

// Attach event handlers.
function init( ) {

    // Upload file synchronously.
    document.getElementById("in1").
    addEventListener("change", 
    loadRiddles, false);

    // Attach event handler to button
    document.getElementById("btn1").
    addEventListener("click", displayRiddles);
}
window.addEventListener("load", init);