Send back data from node.js to client side javascript

Question

what I´m trying to do is the following I already set a fetch connection from client side JS to the server Node.JS when a person click on a button in HTML which triggers that in the server side looks for an element in the MongoDB database in it find´s it, but my question is how do I send that found element back to the client side JS.

Javascript Code:

var button = document.getElementById("1");

button.addEventListener("click", idss);


function idss() {
      var id = this.id;

    var data = {
    name : id 
}

fetch("/clicked", {
     method: 'POST',
     headers: {
     'Content-Type': 'application/json'
     }, 
     body: JSON.stringify(data)
})
   .then(function(response) {
      if(response.ok) {
        console.log('awesome');
        return;
      }
      throw new Error('Request failed.');
    })
    .catch(function(error) {
      console.log(error);
    }); 
}


NODE JS:

app.post("/clicked", (req, res) => {
    var pro = (req.body.name);
    Number(pro);
    Product.findOne({"id": pro}, function(err, foundLList) {
        if(err) {
            console.log(err);
        } else {
            console.log(foundLList); //THE ELEMENT IS FOUND
        }
    } 
  ); 
});

What I´m trying to do is to send the found element to Javascript so I can added to another variable.

in Node.js use res.send(data); to actually return something. As far as I know most of MongoDB function are async, so it's better to use async/await — Evgenii Malikov
– Evgenii Malikov, Commented Jul 20, 2019 at 19:21
You're using Express.js and this is covered in the basic Hello World example at the start of the documentation. — Quentin
– Quentin, Commented Jul 20, 2019 at 19:22

Mohammed Amir Ansari · Accepted Answer · 2019-07-21 11:22:52Z

1

You have to use res object to send data back to client. Your node code will be:

app.post("/clicked", (req, res) => {
    var pro = (req.body.name);
    Number(pro);
    Product.findOne({
        "id": pro
    }, function(err, foundLList) {
        if (err) {
            console.log(err);
            return res.status(500).json({
                ok: false,
                error: err
            });
        } else {
            console.log(foundLList); //THE ELEMENT IS FOUND
            return res.status(200).json({
                ok: true,
                data: foundLList
            });

        }
    });
});

and on client side, you can read the data like this:

fetch("/clicked", {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(function(response) {
        if (response.ok) {
            console.log('got data: ', response.data);
        }
        throw new Error('Request failed.');
    })
    .catch(function(error) {
        console.log(error);
    });
}

edited Jul 21, 2019 at 11:22

answered Jul 20, 2019 at 19:25

Mohammed Amir Ansari

2,4413 gold badges14 silver badges28 bronze badges

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

4 Comments

Luis Gonzalez Over a year ago

I tried put I´m getting undefined in the undefined for response.data.

Mohammed Amir Ansari Over a year ago

try converting response object to JSON. Add .then(response => response.json()) before the then we have

Luis Gonzalez Over a year ago

Thaks Mohammed I resolve it with this code .then(response => response.json()) .then(res => { if(res.ok) { console.log(res); }

Mohammed Amir Ansari Over a year ago

glad it help :)

Collectives™ on Stack Overflow

Send back data from node.js to client side javascript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related