Сравнение двух объектов JSON с входа AngularJS

Question

Я пользуюсь этим example, но с некоторыми изменениями. Я добавил методы ввода в свое приложение, поэтому пользователь может выбрать любой json-файл из локального компьютера и прочитать его на странице, затем выбрать еще один файл, сравнить его и увидеть результаты на нижней странице. Но я получаю каждый раз, когда ошибка

document.getElementById(...).forEach is not a function 

Что я делаю неправильно? Ниже мой код .. и не работает fiddle с ошибкой:

app.controller("Main",function ($scope) { 

    // ===== Start FileReader ===== 

    $scope.leftWindow = function readSingleLeftFile(e) { 
     var file = e.target.files[0]; 
     if (!file) { 
      return; 
     } 
     var reader = new FileReader(); 
     reader.onload = function (e) { 
      var leftcontent = e.target.result; 
      displayLeftContents(leftcontent); 
     }; 
     reader.readAsText(file); 
    }; 
    function displayLeftContents(leftcontent) { 
     $scope.leftElement = document.getElementById('left-content'); 
     $scope.leftElement.innerHTML = leftcontent; 
    } 
    document.getElementById('left-input') 
     .addEventListener('change', $scope.leftWindow, false); 

    $scope.rightWindow = function readSingleRightFile(e) { 
     var file = e.target.files[0]; 
     if (!file) { 
      return; 
     } 
     var reader = new FileReader(); 
     reader.onload = function (e) { 
      var rightcontent = e.target.result; 
      displayRightContents(rightcontent) 

     }; 
     reader.readAsText(file); 
    }; 
    function displayRightContents(rightcontent) { 
     $scope.rightElement = document.getElementById('right-content'); 
     $scope.rightElement.innerHTML = rightcontent; 
    } 
    document.getElementById('right-input') 
     .addEventListener('change', $scope.rightWindow, false); 

    // ===== End FileReader ===== 

    $scope.results = (function(){ 
     var leftInputIds = {}; 
     var rightInputIds = {}; 
     var result = []; 

     document.getElementById('left-input').forEach(function (el, i) { 
      leftInputIds[el.id] = document.getElementById('left-input')[i]; 
     }); 

     document.getElementById('right-input').forEach(function (el, i) { 
      rightInputIds[el.id] = document.getElementById('right-input')[i]; 
     }); 

     for (var i in rightInputIds) { 
      if (!leftInputIds.hasOwnProperty(i)) { 
       result.push(rightInputIds[i]); 
      } 
     } 
     return result; 
    }()); 
}); 

и ДИВ

<section ng-show="dnd"> 
      <div class="content"> 
       <div class="row"> 
        <div class="childGrid" style="display: flex"> 
         <div style="width: 50%"> 
          <input type="file" id="left-input"/> 
          <h3>Contents of the file:</h3> 
          <pre id="left-content"></pre> 
         </div> 
         <div style="width: 50%"> 
          <input type="file" id="right-input"/> 
          <h3>Contents of the file:</h3> 
          <pre id="right-content"></pre> 
         </div> 
        </div> 
        <div class="parentGrid"> 
         <div id="compare"> 
          {{results|json}} 
         </div> 
        </div> 
       </div> 
      </div> 
     </section> 

Answer 1

document.getElementById() возвращает один объект, а не массив.

forEach Для управления им нужен массив в odrer.

forEach метод не определен для объекта, но он определен для массива. Итак, вот почему вы получаете сообщение об ошибке

document.getElementById(...).forEach is not a function 

edit1:

сделать так:

var leftInput = document.getElementById('left-input') 
leftInputIds[leftInput.id] = leftInput; 
var rightInput = document.getElementById('right-input') 
rightInputIds[rightInput.id] = rightInput;