title: JavaScript Read, Process and Combine JSON from Multiple Files
body: <p>I have very little clue when it comes to JavaScript, but I am looking to upload multiple JSON files, process them, convert them to text, combine them and then download to a single JS file.</p>
  <p>I've managed to get this working fine for a single file but processing multiple files by passing contents as a variable from FileReader/FileReaderSync results is beyond my understanding.</p>
  <p><strong>Upload Inputs:</strong><br>
  TestA.json =&gt; { &quot;name&quot;:&quot;John&quot;, &quot;age&quot;:30, &quot;car&quot;:null }<br>
  TestB.json =&gt; { &quot;name&quot;:&quot;Bob&quot;, &quot;age&quot;:35, &quot;car&quot;:&quot;toyota&quot;}</p>
  <p>Processing: Arbitrary.... but lets just say add 5 to the ages</p>
  <p><strong>Download / Output</strong> JS file as follows:<br>
  <code>var TestA = { &quot;name&quot;:&quot;John&quot;, &quot;age&quot;:35, &quot;car&quot;:null }; var TestB = { &quot;name&quot;:&quot;Bob&quot;, &quot;age&quot;:40, &quot;car&quot;:&quot;toyota&quot;};</code></p>
  <p>This is what I have to process files but I can't figure out how to merge the outputs into a single file;</p>
  <p><a href="https://jsfiddle.net/simid/0d9mqn7y/3/" rel="nofollow noreferrer">https://jsfiddle.net/simid/0d9mqn7y/3/</a></p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js&quot;&gt;&lt;/script&gt;    
      &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.2/FileSaver.min.js&quot;&gt;&lt;/script&gt;
      &lt;script type=&quot;text/javascript&quot;&gt;
  
          function encodeJSON (varJSON) {
              //do something to varJSON
          }
          
          function processFiles() {
                  var filelist = document.getElementById('files').files;
                  for(var i=0; i&lt;filelist.length; i++) {
                      encodeFiles(filelist[i]);
                  }
              }
          
          function encodeFiles(file) {
              var reader = new FileReader();
              reader.onload = function() {
                  var JSONData = JSON.parse(reader.result);
                  encodeJSON(JSONData);
                  JSONData = 'var ' + file.name.split('.')[0] + ' = ' + JSON.stringify(JSONData) + ';' 
                  var blob = new Blob([JSONData], {type: &quot;text/plain;charset=utf-8&quot;});
                  saveAs(blob, 'encoded.js');
              }
              reader.readAsText(file, &quot;UTF-8&quot;);
          }
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;p&gt;JSON inputs:&lt;/p&gt;
      &lt;p&gt;&lt;input type=&quot;file&quot; multiple id=&quot;files&quot; onchange=&quot;processFiles()&quot; /&gt;&lt;/p&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>Cheers</p>