ExpressJS IP and AngularJS $http get

Question

I'm trying to learn ExpressJS and I'm having trouble getting IP address from an Express route to display in the browser via Angular controller.

I'm using 2 Nodejs modules (request-ip and geoip2) to get the IP and then lookup geolocation data for that IP. Then trying to use Angular to display the geolocation data in the browser using an Angular $http get call.

My Express route for the IP:

// get IP address
router.get('/ip', function (req, res, next) {
    console.log('requestIP is ' + ip);
    // geolocation
    geoip2.lookupSimple(ip, function(error, result) {
    if (error) {
        //return res.status(400).json({error: 'Something happened'});//default
        return res.sendStatus(400).json({error: 'Something happened'});
        }
        else if (result) {
        return res.send(result);
      }
    });
});

And my AngularJS controller code:

function MainController($http) {
    var vm = this;
    vm.message = 'Hello World';
    vm.location = '';
    vm.getLocation = function() {
        $http({
            method: 'GET',
            url: 'localhost:8000/ip'
        }).then(function (result) {
            console.log(result);
            return vm.location = result;
        });
      }; 
    };

The Hello World message displays but not the location...? I can also go to localhost:8000/ip and see the JSON result. The result doesn't appear in Chrome's console either. The result is a json object like this:

{"country":"US","continent":"NA","postal":"98296","city":"Snohomish","location":{"accuracy_radius":20,"latitude":47.8519,"longitude":-122.0921,"metro_code":819,"time_zone":"America/Los_Angeles"},"subdivision":"WA"}

I'm not sure why the Hello Word displays and the location doesn't when it seems that I have everything configured correctly... so obviously I'm doing something wrong that I don't see...?

Answer 1

1. You have initialised 'vm.location' as a string when in fact it is a JSON object.

   vm.location = {};

2. You need to adjust the url paramater in your request to:

   url: '/ip'

3. As you are sending back JSON from Express.js, you should change your response line to:

   return res.json(result);

Answer 2

Do you call vm.getLocation() somewhere in your code after this?
The data you need is under result.data from the response object.
Also in order to display the data in the html you have to specify which property to display from the vm.location object (vm.location.country, vm.location.city etc..).

From angular docs about $http:

The response object has these properties:
data – {string|Object} – The response body transformed with the transform functions.
status – {number} – HTTP status code of the response.
headers – {function([headerName])} – Header getter function.
config – {Object} – The configuration object that was used to generate the request.
statusText – {string} – HTTP status text of the response.

Answer 3

Is this express js and angular hosted on the same port? If so please replace your

$http({
    method: 'GET',
    url: 'localhost:8000/ip'
}).then(function (result) {
    console.log(result);
    return vm.location = result;
});

with

$http({
    method: 'GET',
    url: '/ip'
}).then(function (result) {
    console.log(result);
    return vm.location = result;
});

It may be considered as CORS call and you have it probably disabled. You can also specify second function to then (look code below) and see if error callback is called.

$http({
    method: 'GET',
    url: '/ip'
}).then(function (result) {
    console.log(result);
    return vm.location = result;
}, function (error) {
    console.log(error);
});