Angular.js and Node.js - Passing input variables through controller to server.js

Question

Just learning the MEAN stack at the moment, and I'm fiddling around with it but I'm a little lost.

What I'm trying to achieve is to utilize an external API to auto fill input fields about the tag that is initially typed.

So the question is, how do I pass the value of foo all the way to server.js for the call?

End-user enters a tag and presses 'Get Data'
Controller passes the value of tag (defined in my .ejs file as ng-model="object.tag") to the getData route
server.js takes tag and passes it into the external API URL to call
External API does its thing, returns with a nice and pretty JSON file for me.
Controller auto populates as many form fields as it can from the returned JSON.

Here are a few code bits just so you understand the structure of what I have a little more:

--index.ejs--

<input type="text" ng-model="object.tag" />
<button ng-click="grabFooInfo()">Get Data</button>

--controller.js--

$scope.grabFooInfo = function(){
    $http.get('/getData').success(function(res){
        // Will do stuff here after data comes back
    });
};

--server.js--

app.get('/getData', function (req, res) {
    var options = {
        host: 'my.api.im.calling.com,
        path: '/v1/fooApi/' + // #Need foo here //
        headers: {
            accept: "application/json"
        },
        method: 'GET'
    };

    var req = https.request(options, function (response) {
        var fooData = '';
        response.on('data', function (data) {
            fooData += data;
        });
        response.on('end', function () {
            res.send(fooData);
        });
    });
    req.on('error', function (e) {
        console.log('problem with request: ' + e.message);
    });
    req.end();
});

Am I doing my routing properly for how Node is intended to work?
How do I pass an input value to this internal function in server.js using Angular?

Raja Sekar · Accepted Answer · 2016-03-02 12:09:24Z

1

In client side, HTML

<input type="text" ng-model="object.tag" />
<button ng-click="grabFooInfo(object)">Get Data</button>

JS

 $scope.grabFooInfo = function(object){
    $http({
        url:'/getData', 
        method: "GET",
        params: object
     });
});

In Server Side,

app.get('/getData', function (req, res) {
   var data = req.params.data; // it contains the value foo
})

Hope this works for you!!

edited Mar 2, 2016 at 12:09

answered Mar 2, 2016 at 12:04

Raja Sekar

2,14017 silver badges23 bronze badges

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

9 Comments

eltonkamami Over a year ago

when the response comes back he will need to call $scope.$apply for the data to be updated on the controller

Nicholas Hazel Over a year ago

Well, it's not going to be foo, I was using that as an example. It's an input field. So somebody will be typing "#992823" (or some other acceptable tag for the external API). I need to pass the value from the form.

Raja Sekar Over a year ago

@NicholasHazel i made it generic!! this solved your question??

Nicholas Hazel Over a year ago

Hmm, still coming up undefined in my server console when I console.log the value of data after declaring it. Doesn't seem to be taking the input value of ng-model="object.tag"

Raja Sekar Over a year ago

in server console or browser console??

|

Collectives™ on Stack Overflow

Angular.js and Node.js - Passing input variables through controller to server.js

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related