Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <meta charset="UTF-8" />
- <input type="file" id="files" name="files" accept=".json"/>
- <output id="list"></output>
- <div id="traveler_num"></div>
- <div id="first_name"></div>
- <script>
- //stores the output of a parsed JSON file
- const parsed = jsonText => JSON.parse(jsonText);
- //creates a new file reader object
- const fr = new FileReader();
- function writeInfo (data) {
- //modifies the DOM by writing info into different elements
- document.getElementById('traveler_num').innerHTML = 'Traveler: ' + data.traveler_num;
- document.getElementById('first_name').innerHTML = 'First Name: ' + data.first_name;
- };
- function handleFileSelect (evt) {
- //function is called when input file is Selected
- //calls FileReader object with file
- fr.readAsText(evt.target.files[0])
- };
- fr.onload = e => {
- //fuction runs when file is fully loaded
- //parses file then makes a call to writeInfo to display info on page
- writeInfo(parsed(e.target.result));
- };
- //event listener for file input
- document.getElementById('files').addEventListener('change', handleFileSelect, false);
- </script>
- <!DOCTYPE html>
- <meta charset="UTF-8"/>
- <input type="file" id="files" name="files" accept=".json"/>
- <output id="list"></output>
- <div id="traveler_num"></div>
- <div id="first_name"></div>
- <script>
- (function () {
- const fileReader = new FileReader();
- const travelerNumElement = document.getElementById('traveler_num');
- const firstNameElement = document.getElementById('first_name');
- this.writeInfo = (data) => {
- travelerNumElement.innerHTML = 'Traveler: ' + data.traveler_num;
- firstNameElement.innerHTML = 'First Name: ' + data.first_name;
- }
- this.handleFileSelect = (event) => fileReader.readAsText(event.target.files[0]);
- fileReader.onload = (event) => this.writeInfo(JSON.parse(event.target.result));
- document.getElementById('files').addEventListener('change', handleFileSelect, false);
- })();
- </script>
- // impure..
- function handleFileSelect (evt) {
- fr.readAsText(evt.target.files[0])
- }
- // pure
- function handleFileSelect (fr, evt) {
- fr.readAsText(evt.target.files[0])
- }
Add Comment
Please, Sign In to add comment