CODEWITHSUNDEEP
javascriptnode.jsmongodbdom
TheRock
TheRock

Reputation: 97

Passing data from backend (nodejs) to frontend javascript

I have data in my database (MongoDB) and I am finding data from DB and saving it to array. And when button is clicked on page I want to send that data to my JavaScript file and using DOM show it on page.

I am finding data form DB when page loads:

app.get('/', function(req, res) {
    var ipsumTextArray = [];
    Ipsum.find({}, function(err, allIpsumTexts) {
        if (err) {
            console.log(err);
        } else {
            allIpsumTexts.forEach(function(ipsum) {
                ipsumTextArray.push(ipsum.text);
            });
        }
        res.render('home');
    });
});

And in my other JavaScript file I want this function to get data from DB and do whatever I want.

function randomIpsum(text) {
    text.value = 'text from database'; // text is textarea where I want to show text
}

Upvotes: 0

Views: 11884

Answers (1)

Dashzeveg Galbadrakh
Dashzeveg Galbadrakh

Reputation: 706

You need to render with a parameter.

app.get('/', function(req, res) {
    var ipsumTextArray = [];
    Ipsum.find({}, function(err, allIpsumTexts) {
        if (err) {
            console.log(err);
        } else {
            allIpsumTexts.forEach(function(ipsum) {
                ipsumTextArray.push(ipsum.text);
            });
        }
        res.render('home', { arr: ipsumTextArray });
    });
});

In the front-end (view):

var arr= {{ arr }}

function randomIpsum(text) {
    //text.value = 'text from database'; // text is textarea where I want to show text
    text.value = arr[0]
}

OR

You can send a plain text from your nodejs.

app.get('/', function(req, res) {
    var ipsumTextArray = [];
    Ipsum.find({}, function(err, allIpsumTexts) {
        if (err) {
            console.log(err);
        } else {
            allIpsumTexts.forEach(function(ipsum) {
                ipsumTextArray.push(ipsum.text);
            });
        }
        res.send(ipsumTextArray);
    });
});

You can get the data using jQuery in the front-end.

<button id="btn">Get Data</button>

$("#btn").on("click", function(){
    $.get("/", function(data){
        randomIpsum(text, data)
    })
})

function randomIpsum(text, data) {
    //text.value = 'text from database'; // text is textarea where I want to show text
    text.value = data
}

Upvotes: 2

Related Questions