Get value from client side script and override server side script

Question

Below are my server side and client side JavaScript files. I have hard coded queryObject in server side script I can display the body in client-side. The problem is how to get value from client side for queryObject variable in server side and override the existing values. In short, current program converts USD to GBP as I hard-coded it. I want a way to access queryObject from client side and give my own values.

//=====================Server Side Script========================//

var request = require('request');
const path = require("path");
const express = require("express");
const app = express();
// const hbs = require("hbs");

const port = process.env.PORT || 3000;

const pathPublic = path.join(__dirname, "../public");
const pathView = path.join(__dirname, "../templates/views");
app.set("view engine", "hbs");
app.set("views", pathView);
app.use(express.static(pathPublic));

app.get("", (req, res) => {
  res.render("home", {
    title: "Currency Converter"
  });  
});


app.get("/currency", (req, res) => {
    const uri = "https://currency-exchange.p.rapidapi.com/exchange?",
    headers={
    'x-rapidapi-host': 'currency-exchange.p.rapidapi.com',
    'x-rapidapi-key': 'b13c4f3d67msh8143a7f1298de7bp1e8586jsn4453f885a4e7'
    }
    const queryObject  = {
        q: 1,
        from: 'USD',
        to: 'GBP'
        };

    request({
        url:uri,
        qs:queryObject,
        headers: headers
    },
function (error, response, body) {
    if (error) {
        console.log('error:', error); // Print the error if one occurred

    } else if(response && body) {
        console.log('statusCode:', response && response.statusCode); // Print the response status code if a response was received
        res.json({'body': body}); // Print JSON response.
    }
    })
});

app.listen(port, () => {
console.log("Server is running on port " + port);
});

//=====================Client Side Script========================//

const currency = document.querySelector("#currency");
const text1= document.querySelector(".text1");
const text2= document.querySelector(".text2");
const text3= document.querySelector(".text3");
const Form = document.querySelector("form");

function refreshPage() {
  window.location.reload();

}

Form.addEventListener("submit", e => {
    e.preventDefault();


fetch("http://localhost:3000/currency").then(response => {
  response.json().then(data => {
    if (data.error) {
      console.log(data.error);
    } else {
      currency.textContent = data.body;
    }
  });
});

Answer 1

SOLUTION:

In order to modify any values in server, you have to send appropriate HTTP method (eg: POST) with appropriate data in it. And let the server handle the request to change the content of object to make an API call from there.

I made some changes in your code for demonstration and install 'cors', 'body-parser' module and other missing modules to make it run.

HTML:

<!DOCTYPE html>
<html>

<body>  
    <div id="currencyType">
        <select id="fromCurrency">
          <option value="USD">USD</option>
          <option value="GBP">GBP</option>
        </select>
        <select id="toCurrency">
          <option value="USD">USD</option>
          <option value="GBP">GBP</option>
        </select>
    </div>
    <button type="button" id="getCurrency">Get Currency</button>
    <div id="currency" name="currency" type="text"></div>

<script>
    const currency = document.querySelector("#currency");
    const btn = document.getElementById("getCurrency");
    function refreshPage() {
        window.location.reload();
    }
    btn.addEventListener("click", e => {
        var fromCurrency = document.getElementById("fromCurrency");
        fromCurrency = fromCurrency.options[fromCurrency.selectedIndex].value;
        var toCurrency = document.getElementById("toCurrency");
        toCurrency = toCurrency.options[toCurrency.selectedIndex].value;
        var data = {
            fromCurrency: fromCurrency,
            toCurrency: toCurrency
        };
        // calls the API with POST method with data in it
        fetch("http://localhost:3000/currency", {
            method: 'POST',
            mode: 'cors',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(data)
        }).then(response => {
            response.json().then(data => {
                if (data.error) {
                  console.log(data.error);
                } else {
                  currency.textContent = "1 " + fromCurrency + " = " + data.body + " " + toCurrency;
                }
            });
        });
    });
</script>
</body>
</html>

NodeJS:

var request = require('request');
const path = require("path");
const express = require("express");
const app = express();
var cors = require('cors')
// const hbs = require("hbs");
var bodyParser = require('body-parser');

const port = process.env.PORT || 3000;

const pathPublic = path.join(__dirname, "public");
const pathView = path.join(__dirname, "templates/views");
app.set("view engine", "hbs");
app.set("views", pathView);

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.use(express.static(pathPublic));
app.use(cors())


app.get("", (req, res) => {
  res.render("home", {
    title: "Currency Converter"
  });  
});    
app.post("/currency", (req, res) => {
    console.log(req.body);
    const uri = "https://currency-exchange.p.rapidapi.com/exchange?",
    headers={
        'x-rapidapi-host': 'currency-exchange.p.rapidapi.com',
        'x-rapidapi-key': 'b13c4f3d67msh8143a7f1298de7bp1e8586jsn4453f885a4e7'
    }
    const queryObject  = {
        q: 1,
        from: req.body.fromCurrency,
        to: req.body.toCurrency
    };
    console.log(queryObject);
    request({
        url:uri,
        qs:queryObject,
        headers: headers
    }, function (error, response, body) {
        if (error) {
            console.log('error:', error); // Print the error if one occurred

        } else if(response && body) {
            console.log('statusCode:', response && response.statusCode); // Print the response status code if a response was received
            res.json({'body': body}); // Print JSON response.
        }
        })
    });
app.listen(port, () => {
console.log("Server is running on port " + port);
});

Sample output:

Answer 2

You'll code in client-side to send a request to server-side containing the query object. And on the server-side, you pick up your query object.

There are so many ways of doing this.

Using a GET request with parameters - On the server-side your query object will be available at res.query.params
Using a POST request - On the server side you will want to use the body-parser plugin for parsing your response body and hence, your data will be available at res.body

Read on body parser

Get value from client side script and override server side script

Question

2 answers

solution1
2 2019-08-03 07:31:12

solution2
1 2019-08-03 06:45:36

Get value from client side script and override server side script

Question

2 answers

solution1 2 2019-08-03 07:31:12

solution2 1 2019-08-03 06:45:36

solution1
2 2019-08-03 07:31:12

solution2
1 2019-08-03 06:45:36