how to display uploaded json file from local system on html page using angularjs

Question

I would like to print the json values on my html page(this file is uploaded from my local system). I can able to read the file and able to get the json data format in one variable, but I am facing issueson displaying the those values on my view page.

app.js:

mainApp.controller('MainCtrl',['$scope', '$rootScope', '$location', function($scope, $rootScope, $location){
....

 $scope.loadFile = function(){


var input, file, fr;


file = input.files[0];


fr = new FileReader();


fr.readAsText(file);


var imagelines, newArrImage; 


fr.onload = function (e){


 $scope.imagelines = e.target.result;//total data in json format (Ex: [{"name":"imageurl","value":"Image1.nii"},{"name":"3d","value":"3d0"},{"name":"sliceX","value":"sliceX0"},{"name":"sliceY","value":"sliceY0"},{"name":"sliceZ","value":"sliceZ0"}])


$scope.newArr = JSON.parse($scope.imagelines);


angular.forEach($scope.newArrImage, function(data){


console.log("Data VALUES: "+data.value);//here I can get he values, like: (Ex: Image1.nii, 3d0, sliceX0, sliceY0, sliceZ0)


 });



}              


}


...


}]);

html:

<ul>


 <li ng-repeat="data in newArr">


 <span>{{data.value}}</span>


 </li>


 </ul>

Please help me where I am doing wrong to display those .json values on my html page. Thanks in advance.

Answer 1

Can you please check jsfiddle demo http://jsfiddle.net/uvzLxn5g/

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

I did some modification like assumption that data is getting in controller so please read.

Answer 2

Try to change the newArr in Li tags to this value imagelines

 <ul> <li ng-repeat = "data in imagelines" > <span> {{ data.value }} </span> </li> </ul> 

"$scope.imagelines" already have the data of the .json file