{"id":19209,"date":"2022-11-05T20:59:49","date_gmt":"2022-11-05T15:29:49","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-nodejs-mongodb-pass-fetched-data-and-display-it-on-html\/"},"modified":"2022-11-05T20:59:49","modified_gmt":"2022-11-05T15:29:49","slug":"solved-nodejs-mongodb-pass-fetched-data-and-display-it-on-html","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-nodejs-mongodb-pass-fetched-data-and-display-it-on-html\/","title":{"rendered":"[Solved] NodeJS, MongoDB : Pass fetched data and display it on HTML"},"content":{"rendered":"<p> [ad_1]<br \/>\n<\/p>\n<div id=\"answer-34556124\" class=\"answer js-answer accepted-answer js-accepted-answer\" data-answerid=\"34556124\" data-parentid=\"34555613\" data-score=\"1\" data-position-on-page=\"1\" data-highest-scored=\"1\" data-question-has-accepted-highest-score=\"1\" itemprop=\"acceptedAnswer\" itemscope itemtype=\"https:\/\/schema.org\/Answer\">\n<div class=\"post-layout\">\n<div class=\"votecell post-layout--left\"><\/div>\n<div class=\"answercell post-layout--right\">\n<div class=\"s-prose js-post-body\" itemprop=\"text\">\n<pre><code>var questions = [\n    { number: '1', text: 'question_1' },\n    { number: '2', text: 'question_2' },\n    { number: '3', text: 'question_3' },\n];\n\nres.send(result, {\n    questions: questions});\n<\/code><\/pre>\n<p>In the code above instead of initializing an empty array, I am assuming that I have a pre defined array of questions. In the res.send() part of the code, add the code that I have written above this is to create a list of questions which we will use in the html file to display the questions. HTML file &#8211;<\/p>\n<pre><code>&lt;h2&gt;Questions&lt;\/h2&gt;\n&lt;ul&gt;\n&lt;% questions.forEach(function(question) { %&gt;\n    &lt;li&gt;Number: &lt;%= question.number %&gt; - Text: &lt;%= question.text %&gt;&lt;\/li&gt;\n&lt;% }); %&gt;\n&lt;\/ul&gt;\n<\/code><\/pre>\n<p>This way you can display the list of questions but here we have pre-defined the array. What you need to do is that instead of passing the data to the array yourself, you need to get it from the MongoDb. All you will need to do is change the field names according to the fields of you Database.<\/p>\n<p><strong>EDIT<\/strong><br \/>\nDiscard the hardcoded questions array.<br \/>\nI will now try to fetch data from the mongodb now. I hope you have mongoDb setup and good to go. Open mongod and mongo in different terminals and then run the code..<\/p>\n<p>In server.js file<\/p>\n<pre><code>var mongoose = require('mongoose');\/\/I am using mongoose which you can get by running sudo npm install mongoose\nmongoose.connect('mongodb:\/\/localhost:27017\/dbName');\/\/dbName is the database name from which you need to import the questions\n<\/code><\/pre>\n<p>This way you can fire a db in your node app.<br \/>\nThen you need to define your &#8216;Question&#8217; dataset.<\/p>\n<p>question.js file<\/p>\n<pre><code>var mongoose = require('mongoose');\nmodule.exports = mongoose.model('Question', {\nnumber: String,\ntext: String\n}\n<\/code><\/pre>\n<p>Hope this helps!!!<\/p>\n<\/p><\/div>\n<div class=\"mt24\"><\/div>\n<\/div>\n<p>            <span class=\"d-none\" itemprop=\"commentCount\">3<\/span> <\/p><\/div>\n<\/div>\n<p>[ad_2]<\/p>\n<p>solved NodeJS, MongoDB : Pass fetched data and display it on HTML <\/p>\n","protected":false},"excerpt":{"rendered":"<p>[ad_1] var questions = [ { number: &#8216;1&#8217;, text: &#8216;question_1&#8217; }, { number: &#8216;2&#8217;, text: &#8216;question_2&#8217; }, { number: &#8216;3&#8217;, text: &#8216;question_3&#8217; }, ]; res.send(result, { questions: questions}); In the code above instead of initializing an empty array, I am assuming that I have a pre defined array of questions. In the res.send() part of &#8230; <a title=\"[Solved] NodeJS, MongoDB : Pass fetched data and display it on HTML\" class=\"read-more\" href=\"https:\/\/jassweb.com\/solved\/solved-nodejs-mongodb-pass-fetched-data-and-display-it-on-html\/\" aria-label=\"More on [Solved] NodeJS, MongoDB : Pass fetched data and display it on HTML\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[346,1128,902],"class_list":["post-19209","post","type-post","status-publish","format-standard","hentry","category-solved","tag-html","tag-mongodb","tag-node-js"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>[Solved] NodeJS, MongoDB : Pass fetched data and display it on HTML - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-nodejs-mongodb-pass-fetched-data-and-display-it-on-html\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] NodeJS, MongoDB : Pass fetched data and display it on HTML - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] var questions = [ { number: &#039;1&#039;, text: &#039;question_1&#039; }, { number: &#039;2&#039;, text: &#039;question_2&#039; }, { number: &#039;3&#039;, text: &#039;question_3&#039; }, ]; res.send(result, { questions: questions}); In the code above instead of initializing an empty array, I am assuming that I have a pre defined array of questions. In the res.send() part of ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-nodejs-mongodb-pass-fetched-data-and-display-it-on-html\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-05T15:29:49+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-nodejs-mongodb-pass-fetched-data-and-display-it-on-html\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-nodejs-mongodb-pass-fetched-data-and-display-it-on-html\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] NodeJS, MongoDB : Pass fetched data and display it on HTML\",\"datePublished\":\"2022-11-05T15:29:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-nodejs-mongodb-pass-fetched-data-and-display-it-on-html\/\"},\"wordCount\":211,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"html\",\"mongodb\",\"node.js\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-nodejs-mongodb-pass-fetched-data-and-display-it-on-html\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-nodejs-mongodb-pass-fetched-data-and-display-it-on-html\/\",\"name\":\"[Solved] NodeJS, MongoDB : Pass fetched data and display it on HTML - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2022-11-05T15:29:49+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-nodejs-mongodb-pass-fetched-data-and-display-it-on-html\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-nodejs-mongodb-pass-fetched-data-and-display-it-on-html\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-nodejs-mongodb-pass-fetched-data-and-display-it-on-html\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] NodeJS, MongoDB : Pass fetched data and display it on HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] NodeJS, MongoDB : Pass fetched data and display it on HTML - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-nodejs-mongodb-pass-fetched-data-and-display-it-on-html\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] NodeJS, MongoDB : Pass fetched data and display it on HTML - JassWeb","og_description":"[ad_1] var questions = [ { number: '1', text: 'question_1' }, { number: '2', text: 'question_2' }, { number: '3', text: 'question_3' }, ]; res.send(result, { questions: questions}); In the code above instead of initializing an empty array, I am assuming that I have a pre defined array of questions. In the res.send() part of ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-nodejs-mongodb-pass-fetched-data-and-display-it-on-html\/","og_site_name":"JassWeb","article_published_time":"2022-11-05T15:29:49+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-nodejs-mongodb-pass-fetched-data-and-display-it-on-html\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-nodejs-mongodb-pass-fetched-data-and-display-it-on-html\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] NodeJS, MongoDB : Pass fetched data and display it on HTML","datePublished":"2022-11-05T15:29:49+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-nodejs-mongodb-pass-fetched-data-and-display-it-on-html\/"},"wordCount":211,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["html","mongodb","node.js"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-nodejs-mongodb-pass-fetched-data-and-display-it-on-html\/","url":"https:\/\/jassweb.com\/solved\/solved-nodejs-mongodb-pass-fetched-data-and-display-it-on-html\/","name":"[Solved] NodeJS, MongoDB : Pass fetched data and display it on HTML - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-11-05T15:29:49+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-nodejs-mongodb-pass-fetched-data-and-display-it-on-html\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-nodejs-mongodb-pass-fetched-data-and-display-it-on-html\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-nodejs-mongodb-pass-fetched-data-and-display-it-on-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] NodeJS, MongoDB : Pass fetched data and display it on HTML"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/19209","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=19209"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/19209\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=19209"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=19209"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=19209"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}