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(){
     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 'Upload' 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 = JSON.parse($scope.imagelines);
                     
                      angular.forEach($scope.newArr, 		   function(data){
                          
        $scope.dataItems.push(data.value);    
		console.log("Data VALUES: "+data.value);
		});
                      $scope.$apply();
                    
                }}
	 }
}]);

//sample json: [{"name":"A","value":"A1"},{"name":"B","value":"B1"},{"name":"C","value":"C1"},{"name":"D","value":"D1"}]