title: sheet_to_json producing bad array of array
body: <p>Using Angular 9, I am building a step wizard and the first step is to read and parse an <code>.xlsx</code> file.</p>
  <p>I have a file input defined as such:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;form [formGroup]=&quot;steps[currentStep].form&quot;&gt;
    &lt;label&gt;Select File to Process&lt;/label&gt;
    &lt;input accept=&quot;.xlsx&quot;
           autocomplete=&quot;off&quot;
           floatPlaceholder=&quot;always&quot;
           formControlName=&quot;input&quot;
           placeholder=&quot;Input&quot;
           type=&quot;file&quot;
           (change)=&quot;fileChanged($event)&quot;&gt;
  &lt;/form&gt;
  </code></pre>
  <p>I then have an interface that represents a one-to-one relationship to a data table, I would define the entire interface but there is like 100 columns (outside of my control and they're all named terribly). But it basically looks like:</p>
  <pre class="lang-js prettyprint-override"><code>export interface IRequestItem {
      ReqItemId: number;
      ReqNum?: string;
      _ReqItem?: number;
      CatNum?: number;
      // ... etc.
  }
  </code></pre>
  <p>The idea is that the user would upload the <code>.xlsx</code> file using the input and then an array of IRequestItem would be created. To do this, here is how the fileChanged event handler is setup:</p>
  <pre class="lang-js prettyprint-override"><code>fileChanged(e): void {
      this.steps[this.currentStep].loading = true;
      const reader = new FileReader();
      const file = e.target.files[0];
      reader.onload = (event) =&gt; {
          const data = reader.result;
          const workBook = XLSX.read(data, { type: 'binary' });
          if (workBook.SheetNames.length === 0) {
              this.steps[this.currentStep].loading = false;
              return;
          }
          const worksheet = workBook.Sheets[workBook.SheetNames[0]];
          this.workSheet = XLSX.utils.sheet_to_json&lt;IRequestItem&gt;(worksheet, {
              blankrows: false,
              header: 1,
              raw: true,
              rawNumbers: true
          });
  
          this.steps[this.currentStep].loading = false;
      };
      reader.readAsBinaryString(file);
  }
  </code></pre>
  <p>Basically it does the following:</p>
  <ol>
  <li>Set the <code>loading</code> property of the current step</li>
  <li>Get the file contents using a FileReader
  <ul>
  <li>Step 3 would be executed after the file contents are read</li>
  </ul>
  </li>
  <li>Get the FileReader results and convert it to an <code>XLSX.WorkBook</code>
  <ul>
  <li>If the user uploads an empty workbook then unset the <code>loading</code> property and return</li>
  </ul>
  </li>
  <li>Get the first worksheet of the workbook</li>
  <li>Try to convert the worksheet to an array of <code>IRequestItem</code> using the <code>XLSX.utils.sheet_to_json&lt;T&gt;</code> method</li>
  </ol>
  <p>Everything appears to run fine up until step 5, but if setup a debugger on that line the output in the console is an array of array.</p>
  <p>What I don't understand about this is that I'm creating the <code>.xlsx</code> file by querying the table in SSMS, exporting the results as a <code>.CSV</code> file, and then saving the file using the <code>.xlsx</code> extension (in Microsoft Excel). So I know for a fact that not only is my file properly setup but I also know that the data represents a legit IRequestItem.</p>