Guest User

Untitled

a guest
Dec 18th, 2017
76
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.17 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <meta charset="UTF-8" />
  3. <input type="file" id="files" name="files" accept=".json"/>
  4. <output id="list"></output>
  5. <div id="traveler_num"></div>
  6. <div id="first_name"></div>
  7.  
  8. <script>
  9.  
  10. //stores the output of a parsed JSON file
  11. const parsed = jsonText => JSON.parse(jsonText);
  12. //creates a new file reader object
  13. const fr = new FileReader();
  14.  
  15. function writeInfo (data) {
  16. //modifies the DOM by writing info into different elements
  17. document.getElementById('traveler_num').innerHTML = 'Traveler: ' + data.traveler_num;
  18. document.getElementById('first_name').innerHTML = 'First Name: ' + data.first_name;
  19. };
  20.  
  21. function handleFileSelect (evt) {
  22. //function is called when input file is Selected
  23. //calls FileReader object with file
  24. fr.readAsText(evt.target.files[0])
  25. };
  26.  
  27. fr.onload = e => {
  28. //fuction runs when file is fully loaded
  29. //parses file then makes a call to writeInfo to display info on page
  30. writeInfo(parsed(e.target.result));
  31. };
  32.  
  33. //event listener for file input
  34. document.getElementById('files').addEventListener('change', handleFileSelect, false);
  35.  
  36. </script>
  37.  
  38. <!DOCTYPE html>
  39. <meta charset="UTF-8"/>
  40. <input type="file" id="files" name="files" accept=".json"/>
  41. <output id="list"></output>
  42. <div id="traveler_num"></div>
  43. <div id="first_name"></div>
  44.  
  45. <script>
  46. (function () {
  47. const fileReader = new FileReader();
  48. const travelerNumElement = document.getElementById('traveler_num');
  49. const firstNameElement = document.getElementById('first_name');
  50.  
  51. this.writeInfo = (data) => {
  52. travelerNumElement.innerHTML = 'Traveler: ' + data.traveler_num;
  53. firstNameElement.innerHTML = 'First Name: ' + data.first_name;
  54. }
  55.  
  56. this.handleFileSelect = (event) => fileReader.readAsText(event.target.files[0]);
  57.  
  58. fileReader.onload = (event) => this.writeInfo(JSON.parse(event.target.result));
  59.  
  60. document.getElementById('files').addEventListener('change', handleFileSelect, false);
  61. })();
  62. </script>
  63.  
  64. // impure..
  65. function handleFileSelect (evt) {
  66. fr.readAsText(evt.target.files[0])
  67. }
  68.  
  69. // pure
  70. function handleFileSelect (fr, evt) {
  71. fr.readAsText(evt.target.files[0])
  72. }
Add Comment
Please, Sign In to add comment