Why am I failing to get data from the server using angularjs $http.get()?

Question

The question should be clear enough, and my code should display the issue. Any questions just comment underneath.

app.js

var express = require('express');
var app = express();

app.use(express.static('public'));



var characters = {"Griffins": 
    [{"Name":"Lois Griffin",
    "Gender":"Female",
    "Role": "Mother"},

    {"Name":"Chris Griffin",
    "Gender":"Male",
    "Role": "Son"},

    {"Name":"Meg Griffin",
     "Gender":"Female",
     "Role": "Daughter"}]     
 };

app.get("/characters", function(req, res) {
    res.send(characters);
})

app.listen(9000, function(){
    console.log('Running');
});

angular.js

app.controller('listCtrl',function($scope, $http){

    $scope.characterData = function() {
        $http.get("/characters").then(function(data) {
            console.log(data, 'success')
        },function(data) {
            console.log("data, failure.")
        })
    }
})

error

Failed to load resource: the server responded with a status of 404 (
Object "failure."

object in error

Object -
config : Object
data : "Cannot GET /characters↵"
headers : function (d) 
status : 404
statusText : "Not Found"
__proto__ : Object

Note: When using $http.get('characters.json')... I am able to get the data from a file called 'character.json'.

Did you try to access /characters directly from your browser? You can also try cUrl. — Molda
– Molda, Commented Oct 25, 2016 at 11:22

Malhar · Accepted Answer · 2016-10-25 11:17:42Z

1

404 is a code which the server sends, when the server is not able to find a resource. There can be many reasons that lead to a 404 in response but the most common one's are:

wrong path given.
spelling problem in the path.

$http.get(url, [config]) : There are 2 arguments that are accepted. url is a absolute/relative path. This is a reason why, $http.get('characters.json') is working instead of $http.get('/characters').

So, you should instead use the proper path. If, 'characters.json' is inside '\characters' directory, you should give the correct path $http.get('\characters\characters.json') so that the server can locate the file.

And also, since you are sending json data, you should use, res.json instead of res.send.

answered Oct 25, 2016 at 11:17

Malhar

1733 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Maximillion Bartango Over a year ago

If you have a minute or two, please view this short video. It is what I am basing the code on. youtube.com/watch?v=xNfzLbRhamI

Danilo Velasquez · Accepted Answer · 2016-10-25 11:17:59Z

1

The get method in angular need the full url string, probably is something like this:

app.controller('listCtrl',function($scope, $http){
var serverHost = 'example.com';
var serverPort = '9000';

$scope.characterData = function() {
    $http.get("http://'+serverHost+':'+serverPort+'/characters").then(function(data) {
        console.log("success");
        console.log(data);
    },function(data) {
        console.log("failure");
        console.log(data);
    })
  }
});

edited Oct 25, 2016 at 11:17

answered Oct 25, 2016 at 11:11

Danilo Velasquez

5012 silver badges12 bronze badges

3 Comments

Maximillion Bartango Over a year ago

This is not an option as I am using an online workspace (codenvy), however this shouldn't be a problem based on the results of this question - stackoverflow.com/questions/34007032/…

Ionut Necula Over a year ago

@Danilo Velasquez, that's not true, it should work with only /characters. Please refer to this

Danilo Velasquez Over a year ago

Arent you trying to connect to an api server?

Pandi_Snkl · Accepted Answer · 2016-10-25 12:19:20Z

1

Make characters.json file and change app.get method in app.js

app.get('/characters', function (req, res) {
   // First read existing users.
   fs.readFile( __dirname + "/" + "characters.json", 'utf8', function (err, data) {
      data = JSON.parse( data );

      console.log( data );
      res.end( JSON.stringify(data ));
   });
})

//change your server configuration

var server = app.listen(8089, function () {
   var host = server.address().address
   var port = server.address().port
   console.log("Example app listening at http://%s:%s", host, port)

})

You can get Json Data in your html page

edited Oct 25, 2016 at 12:19

answered Oct 25, 2016 at 12:01

Pandi_Snkl

5045 silver badges17 bronze badges

Comments

Michael · Accepted Answer · 2017-04-05 16:31:00Z

0

My own problem now seems to be working. I don't know what is going on, I think there are stability issues in using an online work space and a virtual machine to run servers, even though there shouldn't be. Thank you for everybody's input, I still managed to pick up some good information.

edited Apr 5, 2017 at 16:31

Michael

44.5k12 gold badges97 silver badges143 bronze badges

answered Oct 25, 2016 at 12:50

Maximillion Bartango

1,5991 gold badge20 silver badges34 bronze badges

Collectives™ on Stack Overflow

Why am I failing to get data from the server using angularjs $http.get()?

4 Answers 4

1 Comment

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related