JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp">
<div ng-controller="MainCtrl">
    <input type='file' id='fileinput'/><input type="button" ng-click='loadFile()' value="Uplaod" />
    {{ dataItems }}
    </div>
</div>

JavaScript

var mainApp = angular.module('myApp', []);
mainApp.controller('MainCtrl',['$scope', '$rootScope', '$location', function($scope, $rootScope, $location){
 $scope.dataItems = [];   
 $scope.loadFile = function(){
     debugger;
     var input, file, fr;
 	    	    if (typeof window.FileReader !== 'function') {
 	    	      alert("The file API isn't supported on this browser yet.");
 	    	      return;
 	    	    }

 	    	    input = document.getElementById('fileinput');
 	    	    if (!input) {
 	    	      alert("Couldn't find the fileinput element.");
 	    	    }
 	    	    else if (!input.files) {
 	    	      alert("This browser doesn't seem to support the `files` property of file inputs.");
 	    	    }
 	    	    else if (!input.files[0]) {
 	    	      alert("Please select a .json file before clicking 'Load State' button");
 	    	    }
 	    	    else {
                    file = input.files[0];
 	    	      fr = new FileReader();
                     fr.readAsText(file);
 	    	    var imagelines, newArr; 
 	    	      fr.onload = function (e){
                       $scope.imagelines = e.target.result;
                     // $scope.newArr = $scope.imagelines;
                      $scope.newArr = JSON.parse($scope.imagelines);
                      angular.forEach($scope.newArr, function(data){
        $scope.dataItems.push(data.value);    
		console.log("Data VALUES: "+data.value);//here I can get he values, like: (Ex: Image1.nii, 3d0, sliceX0, sliceY0, sliceZ0)
		});
                    
                }}
	
 	
		
		
//	}
 }
}]);