0

Below is the JavaScript code. How can I send the players array to node.js?

let players = [];
for(var i=0; i<22; i++){
  players.push($(".card > button").eq(i).attr("value"));
}

Below is the node.js code.

const express = require("express");
const bodyParser = require("body-parser");
const mySql = require("mySql");

const app = express();

app.use(express.static("public"));
app.use(bodyParser.urlencoded({extended: true}));
app.set('view engine', 'ejs');

app.get("/play", function(req, res){
  res.render("PlayGame");
});

app.post("/play", function(req, res){
  res.render("PlayGame");
});

I need to catch the players array at /play route in node.js. How can I do that?

Improve this question

2 Answers 2

Reset to default
3

Yes, you can send data from the browser Javascript to your node.js app. You would use an Ajax call and use either the XMLHttpRequest API or the more modern fetch() API to send the data. You would create a route in your nodejs server such as /play and then send the data with the request. Your server will then need to parse the incoming data (depending upon how it was sent) and can then act on it.

You will also have to decide if you're sending a GET, POST or PUT request (picking what is appropriate based on typical REST design and architecture). If this is starting a game and you're sending a bunch of data with it, then you would probably use a POST request and send the data as JSON in the body of the request.

In Express, here's how you'd receive that type of data:

app.use(express.json());
app.post("/play", (req, res) => {
    console.log(req.body);          // this would be the data sent with the request
    res.send("game started");
});

In the browser, here's how you could send an array of players to your server.

fetch("/play", {
    method: "POST", 
    headers: {
       'Content-Type': 'application/json'
    },
    body: JSON.stringify(players)
}).then(response => {
    // this line of code depends upon what type of response you're expecting
    return response.text();     
}).then(result => {
    console.log(result);
}).catch(err => {
    console.log(err);
});

See the "Using Fetch" page on MDN for more info.

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

1 Comment

This one should be the accepted answer. I could only upvote it :)
1

On the client side you would need something like this:

const postData = data => {
    const body = JSON.stringify(data);
    return fetch('https://your.url/play', {
        method: 'POST', // GET, POST, PUT, DELETE, etc.
        mode: 'cors', // no-cors, cors, same-origin
        cache: 'no-cache', // default, no-cache, reload, force-cache, only-if-cached
        credentials: 'same-origin', // include, same-origin, omit
        headers: {
            'Content-Type': 'application/json',
        },
        redirect: 'follow', // manual, follow, error
        referrer: 'no-referrer', // no-referrer, client
        body
    })
        .then(response => response.json()) // parses JSON response into native JavaScript objects
}

const players = ['a', 'b', 'c'];

postData({data: players})
    .then(json => {
        console.log(json);
    })
    .catch(e => console.log(e));

On the server side you would need something like this:

app.use(express.json());
app.post("/play", (req, res) => {
    const players = req.body.data;
    ...
    ...
});
Improve this answer

1 Comment

You copied a bunch of stuff from MDN into your fetch() call that is completely unnecessary for what is being done here.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.