Using Passed Mongodb retrieved data by express through res.render('jadeview', mail:mongodbretriveddata) in script. tag in Jade view?

Question

I am passing mongoose retrieved data to my jade view in my node/express application by the below code in routes.js

        app.get('/newrequest', function (req, res) {
    Account.find({}, function (err, data) {
        if (err) {}

        res.render('newrequest', {
            user: req.user,
            mail: data
        });

    });
});

Now I want to extract each values and store in an array by JavaScript in the script tag here from the mail object which is passed to my jade view of which the code is below, I am using Jquery UI auto complete function for which the source is an array named availabletags below, what I'm trying is get the values in the mail object and input those to availabletags array, I tried with - for each item in mail #{item.email} , where I want email document value of the mongodb schema, but I am not able to get the values to the availbletags array, can anyone please help me on this, I don't know if we can use #{mail['0']['email']} directly in script tags in Jade, Currently I'm getting below error

     Express
500 TypeError: C:\Users\chakravarthy\Documents\app\work\views\newrequest.jade:13 
11| $(function() { 
12| var availableTags = [ 
> 13| #{item.email} 
14| ]; 
15| $( "#tags" ).autocomplete({ 
16| source: availableTags Cannot read property 'email' of undefined

Below is my Jade view code

 !!! 5
 html
 head
title= title
meta(name='viewport', content='width=device-width, initial-scale=1.0')
link(href='/css/bootstrap.min.css', rel='stylesheet', media='screen')
script(src='js/jquery.js')
script(src='js/jquery-ui.js')  
script(src='js/bootstrap.min.js')
script.
 $(function() {
    var availableTags = [
         - if(mail.length)
         each item in mail    
           #{item.email} 
       ];
    $( "#tags" ).autocomplete({
    source: availableTags
      });
    });   
body
h1 New Requests Page
.container
form(role='form', action="/requestcomplete",method="post", style='max-width: 300px;')
  .form-group
      input.form-control(type='text', name="requesttype", placeholder='Enter type of Request')
  .form-group
    textarea.form-control(type='text', name="requestdescription", placeholder='Enter Request Description')
div.ui-widget
  label(for="tags") Tags:
  input#tags
  br
  br
  button.btn.btn-default(type='submit') Submit
   
  a(href='/requests')
    button.btn.btn-primary(type="button") Cancel    

How can I be able to get values for auto-complete for the input tag in Jquery or JavaScript in script. tag here in jade code?

Answer 1

We can be able to get values for availabletags array in script tag in node by passing JSON Stringfied data from routes.js to our Jade view as below

   app.get('/newrequest', function (req, res) {
       Account.find({}, function (err, data) {
          if (err) {}

          res.render('newrequest', {
            user: req.user,
            mail: JSON.stringify(data)
          });

       });
    });

and in script tag in Jade view we can use the JSON stringfied data i.e mail variable passed on to Jade as below

         script.
         $(function() {
         var availableTags = !{mail};

         var data = [];
         for(var i=0;i<availableTags.length;i++){
         data.push(availableTags[i]['email'])
          }
         console.log(data);
         $( "#tags" ).autocomplete({
         source: data
           });
         });