title: Best way to store/retrieve big array (mixture of string and typed array) into/from blob or file
body: <p>Lets say I have big array which has different type of data like <strong>json string</strong> and <strong>typed array</strong> such as <code>mainData</code></p>
  
  <pre><code>var strObj = JSON.stringify({'name' : 'suman', 'age' : 29};);
  var strObj2 = JSON.stringify({'name' : 'laxmi', 'age' : 29});
  
  var tpArr = new Uint8Array(2);
      tpArr[0]  = 42;
      tpArr[1]  = 52;
  
  var tpArr2 = new Uint8Array(2);
      tpArr[0]  = 32;
      tpArr[1]  = 52;
  
  var mainData = [{pt : 20, recObjs : strObj}, {pt : 30, recObjs : strObj2},
                  {pt : 40, recObjs : tpArr}, {pt : 50, recObjs : tpArr2}];
  </code></pre>
  
  <p>I have created blob file(type json) with array <code>mainData</code> and export it into json file, like</p>
  
  <pre><code>var stringiFyData = JSON.stringify(mainData);   
  var myBlob = new Blob([stringiFyData], {'type': 'application/json'});
  var link2 = document.getElementById('mydata');
  link2.href = window.URL.createObjectURL(myBlob);
  </code></pre>
  
  <p>Now after file exported as json, I read the file something like,</p>
  
  <pre><code>var fileInput = document.getElementById('fileInput');
  var file = fileInput.files[0];
  var reader = new FileReader();
  reader.onload = function(e) {
       mainData = JSON.parse(reader.result);
  }
  reader.readAsText(file);    
  </code></pre>
  
  <p>Now elements of <code>mainData</code> array,  <code>tpArr</code>, <code>tpArr2</code> lost their's original type from <strong>Uint8Array</strong> into <strong>Object</strong>.</p>
  
  <p>I need this data <code>tpArr</code>, <code>tpArr2</code> in it's original form. For this, first I do convert <code>tpArr</code> object into array. After get the length of array,  create typed array something like</p>
  
  <pre><code>newTypeArr = new Uint8Array(conNewArr.length);
  for(var i=0; i&lt;conNewArr.length; i++ ){
      newTypeArr[i] = conNewArr[i];
  }
  </code></pre>
  
  <p>But length of <code>conNewArr</code> array is about 3000 and which means we have to run loop 6000, first 3000 to convert object into array to know the length, and second 3000 to a create typed array.</p>
  
  <p>And of course the <code>mainData</code> may has that kind of array in thousands.</p>
  
  <p><strong>Other alternative</strong></p>
  
  <p>I tried to export(<code>new Blob(mainData, {'type': 'application/octet-stream'}</code>) it into array buffer and after read the exported file, I got all the data in typed array format but I need these data as it was before exported(mixture of string and typed array).</p>
  
  <p><strong>My questions are</strong> </p>
  
  <ol>
  <li>How can we export mixtutre data of string and typed array in blob file and retrieve these data from blob/file without loosing it's  original form(type)?</li>
  <li>Is the my approach okay ? </li>
  <li>How can we reduce the iteration of such big loop in my approach?</li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>window.URL = window.URL || window.webkitURL;
   var myObject = {'name' : 'suman', 'age' : 29};
   var myObject2 = {'name' : 'laxmi', 'age' : 29};
   
   var strObj = JSON.stringify(myObject);
   var strObj2 = JSON.stringify(myObject2);
   
   var tpArr = new Uint8Array(5);
    tpArr[0]  = 42;
    tpArr[1]  = 52;
    tpArr[2]  = 62;
    tpArr[3]  = 22;
    tpArr[4]  = 42;
       
   var tpArr2 = new Uint8Array(5);
    tpArr[0]  = 32;
    tpArr[1]  = 52;
    tpArr[2]  = 42;
    tpArr[3]  = 402;
    tpArr[4]  = 142;
  
   var mainData = [
    {pt : 20, recObjs : strObj},
    {pt : 30, recObjs : strObj2},
    {pt : 40, recObjs : tpArr},
    {pt : 50, recObjs : tpArr2}
    ];
   
   
   var stringiFyData = JSON.stringify(mainData); 
   var myBlob = new Blob([stringiFyData], {'type': 'application/json'});
   var link2 = document.getElementById('mydata');
   link2.href = window.URL.createObjectURL(myBlob);
   
   function readFile (){
    var fileInput = document.getElementById('fileInput');
    var file = fileInput.files[0];
    var reader = new FileReader();
    reader.onload = function(e) {
      data = JSON.parse(reader.result);
    }
    reader.readAsText(file); 
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href="#"  id="mydata" &gt;Download Data&lt;/a&gt;
   &lt;input type='file' id="fileInput" accept='text/plain' onchange='readFile()'&gt;</code></pre>
  </div>
  </div>
  </p>