I'm making a web page with a table that reads excel files. Here, I use angular, jQuery, HTML, and Javascript.

Here is a sample of a excel file:

User Name |User ID
Jack Sparrow |U382

Pikachu |U712

Sonic |U555

Mario |U153

Godzilla |U999

James Bond |U007

Ethan Hunt |U053

This is my HTML file:
HTML Code:
<!DOCTYPE html>

<html ng-app='myApp'>
   <head>
      <div>
         <div>
            <h1>Excel Reader</h1>
         </div>
         <div id="image">
            <img src="432-433.png" width="450" height="300">
        </div>
      </div>

      <script src="angular.js"></script>
      <script src="angular-route.js"></script>
      <script src="customjs.js"></script>
      <script src="xlsx.full.min.js"></script>
      <script src="jquery-3.1.1.min.js"></script>
      <link rel="stylesheet" href="styles.css">
   </head>

   <body ng-controller='MyController'>
      <div>
         <form enctype="multipart/form-data">
            <input type="file" id="file">
            <button type="submit" value='submit' ng-click="uploadExcel()">Upload File</button>
         </form>
      </div>

      <div>
         <table id="myTable">
            <thead>
               <tr>
                  <th>User Name</th>
                  <th>User ID</th>
               </tr>
            </thead>
            <tbody>

            </tbody>
         </table>
      </div>
   </body>
   
</html>
And this is my Javascript file:
Code:
(function () {
    var app = angular.module('myApp', []);
    app.controller('MyController', ['$scope', myController]);

       var excelObj=[];

       function myController($scope) 
       {
           $scope.uploadExcel=function()
            {
                var myFile=document.getElementById ('file');
                var input=myFile;
                var reader = new FileReader();
                reader.onload=function(){
                    var fileData=reader.result;
                    var workbook=XLSX.read(fileData,{type: 'binary'});
                    workbook.SheetNames.forEach(function(sheetName)
                    {
                        var rowObject=XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
                        excelObj=rowObject;
                    });

                    for(var i=0;i<excelObj.length;i++)
                    {
                        var data=excelObj[i];
                        $('#myTable tbody:last-child').append("<tr><td>"
                        +data.User_Name+"</td><td>"
                        +data.User_ID
                        +"</td></ tr>");
                    }
                };
                reader.readAsBinaryString(input.files[0]);
            }
       }
})();

I was supposed to let the HTML table display the same data, but all the data ended up undefined. Here is what my table actually displayed:

User Name |User ID
undefined |undefined
undefined |undefined
undefined |undefined
undefined |undefined
undefined |undefined
undefined |undefined
undefined |undefined

What did I miss? How can I fix this issue?

Thanks in advance!