Display NodeJS Query result on webpage

January 22, 2022

I have a basic web application where users can upload pictures. I can list the URL-s of these pictures, but I can’t figure out how can I display them on the page. Currently I am using a form to perform a get request because other methods did not work for me.

Server side:

router.get('/pictures', async (req, res) => {
  try {
    let user = await User.find({ 
      name: req.query.name
    });
    let result = []
    user.map(user => {
      result.push(user.avatar)
    })
    res.json(result)
  } catch (error) {
    console.log(error)
  }
})

Client side:

  <form action="/pictures" method="get">
    <input type="text" name="name">
    <input type="submit" value="Get Images" name="submit">
  </form>

This is what I get back:

[
"https://res.cloudinary.com/fidohuncloud/image/upload/v1642794180/eyrfrf8orusaz2bnq7pj.jpg",
"https://res.cloudinary.com/fidohuncloud/image/upload/v1642795673/rrqsddzbjwtfkrm1vbco.jpg"
]

>Solution :

Its been a while when I worked last on the Forms submissions. Either you can use some JS Frameworks like React or Angular to do it very quickly. Or if you want to manipulate DOM, then you can just add it on the fly.

const images_from_client = [
  "https://res.cloudinary.com/fidohuncloud/image/upload/v1642794180/eyrfrf8orusaz2bnq7pj.jpg",
  "https://res.cloudinary.com/fidohuncloud/image/upload/v1642795673/rrqsddzbjwtfkrm1vbco.jpg"
];

images_from_client.forEach((img) => {
  const i_tag = document.createElement("img");
  i_tag.src = img;
  document.getElementById("app").appendChild(i_tag);
});

<!DOCTYPE html>
<html>

<head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
</head>

<body>
    <div id="app"></div>
</body>

</html>