Click here to Skip to main content
15,895,084 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
can any please tell me how can i read the json data which is present in text file using angularjs in mvc


i am using the code below

<html>

<head>
<meta name="viewport" content="width=device-width" />
<title>Angular JS Includes</title>



<style>
table, th, td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}

table tr:nth-child(odd) {
background-color: #f2f2f2;
}

table tr:nth-child(even) {
background-color: #ffffff;
}
</style>

</head>
<body>

AngularJS Sample Application





Name Roll No Percentage
{{ student.Name }} {{ student.RollNo }} {{ student.Percentage }}


</body>
</html>


<script src="~/Scripts/angular.min.js"></script>
<script>

var app = angular.module('myApp', []);
app.controller('studentController', function ($scope, $http) {
alert("hh");

$http.get("data.txt").success(function (response) { $scope.students=response; });
});


</script>





and the data.txt file as follows on desktop





[
{
"Name" : "Mahesh Parashar",
"RollNo" : 101,
"Percentage" : "80%"
},

{
"Name" : "Dinkar Kad",
"RollNo" : 201,
"Percentage" : "70%"
},

{
"Name" : "Robert",
"RollNo" : 191,
"Percentage" : "75%"
},

{
"Name" : "Julian Joe",
"RollNo" : 111,
"Percentage" : "77%"
}
]
Posted

1 solution

Since you're getting in text data, not binary, you need to parse the text so that JavaScript can recognize it as an object.

Fortunately, this is super simple, and there is an angular way to do this, and a JavaScript way.

The angular way is to use angular-resource which is designed to communicate with REST endpoints but should parse out your text file (although I've never explicitly tested this exact behaviour). You can find the documentation for it at:
https://docs.angularjs.org/api/ngResource/service/$resource[^]

I'll show you the JavaScript way, since it's easier with a code snippet. Just make a modification to your success callback:
C#
$http.get("data.txt").success(function (response) { $scope.students= JSON.parse(response); });
 
Share this answer
 
Comments
Suhasini Basavaraj 5-Oct-15 2:38am    
thanks for your solution...i have added JSON.parse...but still not working...i dont know
where is the mistake
Nathan Minier 7-Oct-15 7:26am    
Hrm, looking at the documentation it looks like that particular formulation has been deprecated, callback functionality has been moved to the promise framework.

https://docs.angularjs.org/api/ng/service/$http

It might be worth breaking your call into a more current format:

$http({method: 'GET', url: 'data.txt'}).then(function(result){
$scope.students= JSON.parse(response);
},function(error){
// handle error
});

Then make sure that your response messages are coming in on the browser via Developer Tools -> Network (normally F12 and a tab selection).

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900