Comparing two JSON objects from input AngularJS

Question

I'm using this example but with some modifications. I've added input methods to my app, so user can choose any json file from local pc and read it on a page then choose one more file compare it and see results on the bottom page. But I'm getting every time error

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

What am I doing wrong? Below my code.. and not working fiddle with the error:

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;
    }());
});

and div

<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() returns a single object and not an array.

forEach need an array in odrer to operate it.

forEach method is not defined for object but it is defined for array. So,that's why you getting an error

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

EDIT1 :

do like this :

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