title: How to convert Tab Delimited CSV to JSON data?
body: <p>I have been trying to create a single page html which converts tab delimited raw data into an array of JSON objects. I wrote the code but I am sure this is not the best, as I have nested looping in my code. I am seeking advice from the experts to make this code better.</p>
  <p>It assumes the first row to be the column headers.</p>
  <p>Example;</p>
  <p>INPUT :</p>
  <pre><code>name    age sex address mobile  email   pan
  name1   age1    sex1    address1    mobile1 email1  pan1
  name2   age2    sex2    address2    mobile2 email2  pan2
  name3   age3    sex3    address3    mobile3 email3  pan3
  name4   age4    sex4    address4    mobile4 email4  pan4
  </code></pre>
  <p>EXPECTED OUTPUT:</p>
  <pre><code>{&quot;name&quot; : &quot;name1&quot;,&quot;age&quot; : &quot;age1&quot;,&quot;sex&quot; : &quot;sex1&quot;,&quot;address&quot; : &quot;address1&quot;,&quot;mobile&quot; : &quot;mobile1&quot;,&quot;email&quot; : &quot;email1&quot;,&quot;pan&quot; : &quot;pan1&quot;},
  {&quot;name&quot; : &quot;name2&quot;,&quot;age&quot; : &quot;age2&quot;,&quot;sex&quot; : &quot;sex2&quot;,&quot;address&quot; : &quot;address2&quot;,&quot;mobile&quot; : &quot;mobile2&quot;,&quot;email&quot; : &quot;email2&quot;,&quot;pan&quot; : &quot;pan2&quot;},
  {&quot;name&quot; : &quot;name3&quot;,&quot;age&quot; : &quot;age3&quot;,&quot;sex&quot; : &quot;sex3&quot;,&quot;address&quot; : &quot;address3&quot;,&quot;mobile&quot; : &quot;mobile3&quot;,&quot;email&quot; : &quot;email3&quot;,&quot;pan&quot; : &quot;pan3&quot;},
  {&quot;name&quot; : &quot;name4&quot;,&quot;age&quot; : &quot;age4&quot;,&quot;sex&quot; : &quot;sex4&quot;,&quot;address&quot; : &quot;address4&quot;,&quot;mobile&quot; : &quot;mobile4&quot;,&quot;email&quot; : &quot;email4&quot;,&quot;pan&quot; : &quot;pan4&quot;},
  </code></pre>
  <p>Here is the code;</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const parse = document.getElementById("parse");
  const clear = document.getElementById("clear");
  const textarea = document.getElementById("textarea");
  const result = document.getElementById("result");
  
  clear.addEventListener("click", () =&gt; {
    textarea.value = "";
  });
  parse.addEventListener("click", () =&gt; {
    result.textContent = "";
    let rawData = textarea.value;
    let allRows = rawData.split("\n");
    let columnHeaders = allRows[0].split("\t");
    let dataset = [];
    for (let i = 1; i &lt; allRows.length; i++) {
      dataset.push(allRows[i].split("\t"));
    }
  
    dataset.map((row) =&gt; {
      if (row != "") {
        let rowString = [];
        row.forEach((value, i) =&gt; {
          rowString.push(`"${columnHeaders[i]}" : "${value}"`);
        });
        result.innerHTML += "{" + rowString.join(",") + "},&lt;br/&gt;";
      }
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html {
    width: 100vw;
    height: 98vh;
    font-family: monospace;
    font-size: 120%;
  }
  
  * {
    margin: 0;
    padding: 0.5em;
    box-sizing: border-box;
  }
  
  #top {
    display: block;
    width: 100%;
    height: 75px;
  }
  
  #top div {
    display: block;
    float: right;
  }
  
  .btn {
    display: inline-block;
    width: 100px;
    background-color: rgb(48, 122, 124);
    color: #fff;
    border: none;
    padding: 0.75em;
    cursor: pointer;
    transition: all 0.4s;
    border-radius: 8px;
    outline: none;
  }
  
  .btn:hover {
    margin-top: -0.1em;
    background-color: rgb(57, 142, 145);
    box-shadow: 0px 10px 20px #888;
  }
  
  #columnCount {
    margin-right: 2em;
  }
  
  #columns {
    width: 50px;
    margin-bottom: 1em;
  }
  
  #inpWrapper,
  #resultWrapper {
    display: block;
    margin: 0 auto;
    width: 100%;
    height: 300px;
    margin-bottom: 1em;
    border: solid 1px #777;
  }
  
  textarea {
    border: none;
    resize: none;
    outline: none;
  }
  
  textarea,
  #result {
    display: flex;
    width: 100%;
    height: 100%;
    padding: 1em;
    flex-wrap: wrap;
    transition: all 0.4s;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8" /&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
    &lt;title&gt;Document&lt;/title&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col"&gt;
          &lt;div id="top"&gt;
            &lt;div&gt;
              &lt;button class="btn" id="clear"&gt;Clear&lt;/button&gt;
              &lt;button class="btn" id="parse"&gt;Parse&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="inpWrapper"&gt;
            &lt;textarea name="textarea" id="textarea"&gt;Test Input&lt;/textarea&gt;
          &lt;/div&gt;
          &lt;div id="resultWrapper"&gt;
            &lt;p id="result"&gt;Test&lt;/p&gt;
          &lt;/div&gt;
          &lt;p id="result"&gt;&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>