javascript - How to access data of uploaded JSON file?

Question

I have a html code like this:

<input type="file" id="up" />
<input type="submit" id="btn" />

And I have a JSON file like this:

{
 "name": "John",
 "family": "Smith"
}

And a simple JavaScript function:

alert_data(name, family)
{
     alert('Name : ' + name + ', Family : '+ family)
}

Now I want to call alert_data() with name and family that stored in JSON file which uploaded using my HTML input.

Is there any way to use an HTML5 file reader or something else?
I'm not using server-side programming, all of them are client-side.

Answer 1

You will need an HTML5 browser, but this is possible.

(function(){
    
    function onChange(event) {
        var reader = new FileReader();
        reader.onload = onReaderLoad;
        reader.readAsText(event.target.files[0]);
    }

    function onReaderLoad(event){
        console.log(event.target.result);
        var obj = JSON.parse(event.target.result);
        alert_data(obj.name, obj.family);
    }
    
    function alert_data(name, family){
        alert('Name : ' + name + ', Family : ' + family);
    }
 
    document.getElementById('file').addEventListener('change', onChange);

}());

<input id="file" type="file" />

<p>Select a file with the following format.</p>
<pre>
{
  "name": "testName",
  "family": "testFamily"
}    
</pre>