Passing data from backend (nodejs) to frontend javascript

Question

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
}

You don't seem to be using the data when you render the home page. Is this a server-rendered or single-page application, even? Are you expecting the client to make requests (where are those requests) or the server to build the whole page (why not use the data)? — jonrsharpe
– jonrsharpe, Commented Mar 27, 2020 at 16:17

Dashzeveg Galbadrakh · Accepted Answer · 2020-03-27 16:39:48Z

2

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
}

edited Mar 27, 2020 at 16:39

answered Mar 27, 2020 at 16:27

Dashzeveg Galbadrakh

7061 gold badge9 silver badges24 bronze badges

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

7 Comments

TheRock Over a year ago

Thank you for response sir. When I am trying to do as you just wrote me to do I am getting those errors in my front-end file. Property assignement expected. Declaration of statement expected

Dashzeveg Galbadrakh Over a year ago

@Tony There is a question, what is your client-side technology? nodejs view, react, or ...? And also I added the option into my answer.

TheRock Over a year ago

I am using nodejs view. I prefer not to use jQuery so I would like you to fix if possible first option in your answer

Dashzeveg Galbadrakh Over a year ago

Ok. How about this one: <script>var arr= "<%= arr %>";</script>

Dashzeveg Galbadrakh Over a year ago

What is your template engine?

|

Collectives™ on Stack Overflow

Passing data from backend (nodejs) to frontend javascript

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related