Pass variable from Jquery to Node to run a git command

Question

I have a dropdown list which contains the name of the branches in a html file. I want to take that name and insert it into below node code so that every single time a user clicks a value in dropdown, it should pass it to node and run the command "git log BRANCHNAME" and store it Json (for now):

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


app.get('handle', function(request,response,error){
var branchName = request.body.branchname;
console.log("Branch name"+branchName+"");
 if(error){
console.log("error");
 }
 var exec = require('child_process').exec;
 var fs = require('fs');

  function put(error, stdout, stderr) { 
   var commitsbybranch = JSON.stringify(stdout.split(/\r?\n/).map(function(e) { return e.substring(0);}).filter(function(e) { return e; }));
  fs.writeFile('reacted/testcommitsbybranch.json', commitsbybranch);
   }
  exec("git log "+branchName+"", put);
  console.log("Pulling commits by branch done");
  }  )


   app.listen(3000);

My Jquery code is this so when I click the option I want the value to be passed to above node code

        $.getJSON("Branches.json", function (data) {
                  $.each(data, function (index, item) {
                        $('#users-dropdown').append(
                           $('<option></option>').val(item).html(item)
          );
     });

});

I also need to have proper format of JSON, If I could get help with that too please I need to split each object with right braces.

How are you intending to get the data from the webpage to the Node code? Do you have a REST service of some kind? — Joe Clay
– Joe Clay, Commented Feb 29, 2016 at 15:36
No I don't. I just have html page and jquery code, and then node. But none of it is connected together — Gill
– Gill, Commented Feb 29, 2016 at 15:39
You can't connect HTML code with Node without setting up a server of some kind - they run entirely separately. — Joe Clay
– Joe Clay, Commented Feb 29, 2016 at 15:44
I agree with @JoeClay... But you can try nodegit for use git from nodejs — Leandro William
– Leandro William, Commented Feb 29, 2016 at 15:50

leobelizquierdo · Accepted Answer · 2016-02-29 19:48:33Z

1

You could catch the change event in the <select> tag and send the selected branch to the server. Then in the server create a route to catch the request sended from the client (with the branchname) and do your logic. This is an example:

server:

var express = require('express');
var path = require('path');
var bodyParser = require('body-parser');
var fs = require('fs');

var app = express();


app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.static(path.join(__dirname, 'public')));

app.get('/', function(req, res){
    res.sendFile(path.join(__dirname+'/handle.html'));
});


app.post('/handle', function(request, response, next){
    var branchName = request.body.branchname;
    console.log("Branch name"+branchName+"");

    var exec = require('child_process').exec;


    function put(error, stdout, stderr) {
        var commitsbybranch = JSON.stringify(stdout.split(/\r?\n/).map(function(e) { return e.substring(0);}).filter(function(e) { return e; }));
        fs.writeFile('reacted/testcommitsbybranch.json', commitsbybranch);
    }
    exec("git log "+branchName+"", put);
    console.log("Pulling commits by branch done");
});


app.listen(3000);

the code:

app.post('/handle', function(request, response, next){
...
})

is when we process the client request. Note the use of the middleware body-parser to get the variables in the body attribute.

The client code (handle.html):

<!DOCTYPE html>
<html>
<head>
    <title>Git Branches</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){

            $('#users-dropdown').change(function(){
                var branch = $("#users-dropdown option:selected").text();
                $.post('handle', {branchname: branch}, function(data){
                    console.log(data);
                });
            });

            $.getJSON("branches.json", function (data) {
                $.each(data.branches, function (index, item) {
                    $('#users-dropdown').append($('<option>', {value: item.branch, text: item.branch}));
                });
            });
        });
    </script>
</head>
<body>
    <div>
        <select id="users-dropdown">
        </select>
    </div>
</body>
</html>

Here we send the request to the server after a <option> is selected:

$('#users-dropdown').change(function(){
    var branch = $("#users-dropdown option:selected").text();
    $.post('handle', {branchname: branch}, function(data){
        console.log(data);
    });
});

The branches.json is in the public folder. With this line: app.use(express.static(path.join(__dirname, 'public'))); we make everything inside the public folder available for the clients. This is how the branches.jason file looks:

{
    "branches": [
                    {
                        "branch": "branch1"
                    },
                    {
                        "branch": "branch2"
                    },
                    {
                        "branch": "branch3"
                    },
                    {
                        "branch": "branch4"
                    }
                ]
}

answered Feb 29, 2016 at 19:48

leobelizquierdo

1,66813 silver badges20 bronze badges

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

6 Comments

Gill Over a year ago

Thanks, I am getting errors on my HTML page, now the json doesn't load. But my json file is like this ["master","branch1","branch2"]

Gill Over a year ago

It says branches.json not found and its in the same folder structure

leobelizquierdo Over a year ago

If you have the branches.json file in the root of the public folder it should work, but if the file is deeper in the folder structure you have to explicitly specify the path e.g: if the file is in 'public/json/branches.json' the correct path is 'json/branches.json' in $.getJSON('json/branches.json', ...). public folder is the root for all your static assets and is assumed that is in the root of your app.

Gill Over a year ago

It works now, but when I click on the item in my dropdown nothing happens, it doesn't run the command ` exec("git log "+branchName+"", put);`

leobelizquierdo Over a year ago

make sure that you have a git repo in the root of the app and the proper branches. Also check the file testcommitsbybranch.json in the folder reacted.

|

Collectives™ on Stack Overflow

Pass variable from Jquery to Node to run a git command

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related