Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

I am new to AngularJS and trying to fetch JSON data from a text file:

Here is my HTML:

<div ng-controller="customersController as custCont"> 
  <ul>
    <li ng-repeat="x in names">
      {{ x.Name + ', ' + x.Country }}
    </li>
  </ul>
</div>

Whereas my controller is as given below:

app.controller( "customersController", function( $scope, $window) {
    $http({
        url: 'test.txt',
        dataType: 'json',
        method: 'POST',
        data: '',
        headers: {
            "Content-Type": "application/json"
        }

    }).success(function(response){
        $scope.names = response;
    }).error(function(error){
        $scope.names = 'error';
    });        

This doesn't show anything. Now if I replace the above http request with test.txt data assigned to $scope.names then it starts working: I mean, something like this:

$scope.names = [
{
"Name" : "Alfreds Futterkiste",
"City" : "Berlin",
"Country" : "Germany"
},
{
"Name" : "Berglunds snabbköp",
"City" : "Luleå",
"Country" : "Sweden"
},
{
"Name" : "Centro comercial Moctezuma",
"City" : "México D.F.",
"Country" : "Mexico"
},
{
"Name" : "Ernst Handel",
"City" : "Graz",
"Country" : "Austria"
},
{
"Name" : "FISSA Fabrica Inter. Salchichas S.A.",
"City" : "Madrid",
"Country" : "Spain"
},
{
"Name" : "Galería del gastrónomo",
"City" : "Barcelona",
"Country" : "Spain"
},
{
"Name" : "Island Trading",
"City" : "Cowes",
"Country" : "UK"
},
{
"Name" : "Königlich Essen",
"City" : "Brandenburg",
"Country" : "Germany"
},
{
"Name" : "Laughing Bacchus Wine Cellars",
"City" : "Vancouver",
"Country" : "Canada"
},
{
"Name" : "Magazzini Alimentari Riuniti",
"City" : "Bergamo",
"Country" : "Italy"
},
{
"Name" : "North/South",
"City" : "London",
"Country" : "UK"
},
{
"Name" : "Paris spécialités",
"City" : "Paris",
"Country" : "France"
},
{
"Name" : "Rattlesnake Canyon Grocery",
"City" : "Albuquerque",
"Country" : "USA"
},
{
"Name" : "Simons bistro",
"City" : "København",
"Country" : "Denmark"
},
{
"Name" : "The Big Cheese",
"City" : "Portland",
"Country" : "USA"
},
{
"Name" : "Vaffeljernet",
"City" : "Århus",
"Country" : "Denmark"
},
{
"Name" : "Wolski Zajazd",
"City" : "Warszawa",
"Country" : "Poland"
}
];

The text file obviously contains all the data except the first row (i.e. $scope.names = [ and the last semicolon;

That means the $http request to test.txt is failing which is in the same folder as html and js files. Anyone can please help.

Thanks.

======= UPDATE ========

There were two issues.

  1. I missed $http parameter in my controller function.
  2. I was using "POST", which I replaced with "GET" to make it work

It now work from local machine as well as remote web server.

Thanks for all your help.

share|improve this question
    
what is being displayed when you console.log(typeof response) in your callback? is it a string or an object? –  nanndoj Feb 7 at 21:05
    
Is it compulsory it will be a text file not a json file ? –  squiroid Feb 7 at 21:11
    
The file format is json. Only its extension is .txt, plus I would also need to pull some text files as well. –  Anjum Feb 7 at 21:12
    
@nanndoj I don't think its getting into any of those success() or error () functions –  Anjum Feb 7 at 21:13
    
Just to be clear, your json in that text file is an array? –  mindparse Feb 7 at 21:16

2 Answers 2

up vote 1 down vote accepted

You are missing to define $http as a parameter

app.controller( "customersController", function( $scope, $window, $http) {

Also make sure you are testing in a web server. You cann't make ajax request from file:// protocol

Also change your request from POST to GET and it should work fine. Here is a Punklr

 method: 'GET',
share|improve this answer
    
Thanks. Yes I already noticed and corrected that. Calling from Server also gives the same error. –  Anjum Feb 7 at 21:25
    
Updated my answer adding a working punkler –  nanndoj Feb 7 at 21:36
    
I am not using file:// protocol. But I am able to GET it from my local machine by simply using test.txt as URL. –  Anjum Feb 7 at 21:36
    
I have already done that. Thanks anyway. –  Anjum Feb 7 at 21:38
1  
Yeah. But you have to change the "Content-Type": "application/json" to the one you want –  nanndoj Feb 7 at 21:44

This should work:

$http.get('test.txt')
   .success(function(response){
    $scope.names = response;
}).error(function(error){
    $scope.names = 'error';
});  

See plunker: http://plnkr.co/edit/LA8rwO?p=preview

share|improve this answer
    
Thanks. Please see my comment above –  Anjum Feb 7 at 21:22
1  
also, I am not sure the POST method is right; it works with get, though. –  Manube Feb 7 at 21:25
    
If you are satisfied with the answer, please mark as resolved ;) –  Manube Feb 7 at 21:26
    
No, its not resolved as yet. Let me try Get –  Anjum Feb 7 at 21:28
1  
Indeed method 'POST' returns 'error', while 'GET' seems to do the trick: plnkr.co/edit/4DORU0?p=preview –  Manube Feb 7 at 21:33

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.