Display NodeJS Query result on webpage
Solution 1:
If you'd like to use vanilla javascript, it's possible by overriding the default form behavior.
<!DOCTYPE html>
<html>
<head>
<title>Form submission</title>
<meta charset="UTF-8" />
</head>
<body>
<form id="image-form">
<input type="text" name="name">
<input type="submit" value="Get Images" name="submit">
</form>
<div class="images"></div>
</body>
</html>
And your javascript can use the Fetch API to send a GET request to the backend server and append images into your HTML.
document.getElementById("image-form").addEventListener("submit", function(e) {
e.preventDefault();
fetch("/pictures")
.then(data => data.json())
.then(data => {
data.forEach(function(image) {
let img = document.createElement("img");
img.src = image;
document.querySelector(".images").appendChild(img);
});
});
});
Solution 2:
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>