CODEWITHSUNDEEP
javascriptangularjsnode.jsexpressget
Maximillion Bartango
Maximillion Bartango

Reputation: 1599

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

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'.

Upvotes: 2

Views: 423

Answers (4)

Maximillion Bartango
Maximillion Bartango

Reputation: 1599

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.

Upvotes: 0

Pandi_Snkl
Pandi_Snkl

Reputation: 494

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

Upvotes: 1

Danilo Velasquez
Danilo Velasquez

Reputation: 501

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);
    })
  }
});

Upvotes: 1

Malhar
Malhar

Reputation: 173

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:

  1. wrong path given.
  2. 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.

Upvotes: 1

Related Questions