-1

I want to populate dropdown field in htlm page from mongodb rather than hardcode values

I'm using below stack of technologies: 1) EJS/CSS 2) NodeJS 3) Mongodb

I have created a page where user can create new records. This page having few dropdown fields like Area which should fetch values from collection - Area- of mongodb. For now I have done hardcode to populate the values but I want the values being fetched from database.

Could you please guide me how to achieve with sample code.

Appreciate your response.

Regards, Parag

    <tr>
                    <td>Component Area </td>
                    <td><input type="text" name="comparea" /></td>

                </tr>

I want to populate this area field from mongodb collection.

Parag Shah
  • 17
  • 1
  • 3

1 Answers1

1

Try something like that. Did not test this, but you surely can send array through ejs variable and iterate it on page.

In your router

app.get('/data', async (req,res)=>{

let mongoData = await db.yourDb.find(query here);
res.render('data.ejs',{data:mongoData})
})

now your variable <%=data%> is available on page. You may iterate it, or take out for html variable like 

<script> var data = '<%=data%>' </script>

How to populate select with options check this solved question

Ivan Kolyhalov
  • 902
  • 11
  • 16
  • I updated my code as SyntaxError: Unexpected token catch in C:\NodeJS Project\crud\node-crud\views\employees\create.ejs while compiling ejs I added below code <% if(Area.length>0) { %> <% for (var i=0;i Component Area % } %> <% } %> – Parag Shah Feb 07 '19 at 22:49
  • so it is as it reads, you have a mistake in your code and it is YOUR mistake – Ivan Kolyhalov Feb 07 '19 at 23:02
  • I agreed, but putting inside loop is creating textbox as many times as the loop runs... What I'm looking is the dropdown field area which should be populated with the values given in the render Please help!!!! – Parag Shah Feb 08 '19 at 10:42
  • I don'e see any updated answer. Could you please post your answer once again. appreciate your help. – Parag Shah Feb 08 '19 at 13:33
  • Please refresh it – Ivan Kolyhalov Feb 08 '19 at 13:36
  • When I use then the value of variable data remains null but in actual '<%=data%>' is not null and i have confirmed it using console.log. Appreciate if you can give me tested code so I can finish my development work. – Parag Shah Feb 08 '19 at 14:09
  • find this code in your chrome dev tools -> elements you will see it not null, but a string of data. – Ivan Kolyhalov Feb 08 '19 at 14:25
  • I have seen in chrome in inspect element--> debug and it is showing me var data = ' ' – Parag Shah Feb 08 '19 at 15:41
  • that means that you're not passing it via ejs. Try adding <% console.log('data: ', data) %> to your code and check chrome dev console, if it shows no data in console, that means ejs has not received any data from your router. – Ivan Kolyhalov Feb 08 '19 at 16:12
  • before rendering you i have put console.log("Values of data is :" + areas); res.sender("create", {areas: areas}); This console.log gives me output and I can see all the values but somehow when i tried to use it in ejs then it is showing me null – Parag Shah Feb 08 '19 at 16:17
  • 1. res.sender or res.render? Be more accurate! 2. I told you to add <% console.log('data: ', data) %> to your code, did you do it? I do not want router console.log, but browser console.log! – Ivan Kolyhalov Feb 08 '19 at 16:21
  • Shall I add <% console.log('data: ', data) %> in my .js file or in ejs? – Parag Shah Feb 08 '19 at 16:24
  • ejs of course! You can't use <%%> in js! Man you should spend more time reading docs, it's all there. – Ivan Kolyhalov Feb 08 '19 at 16:25
  • Yes it is printing when i put <% console.log('data: ', data) %> in ejs file. but if I put it inside then not getting any value – Parag Shah Feb 08 '19 at 16:48
  • and it's not supposed to. You really should start from scratch, read the docs, google a lot and get profficient. Currently asking questions here you're just wasting everybody's time. – Ivan Kolyhalov Feb 08 '19 at 17:05