title: How to display array in frontend using EJS in Mongodb Node js?
body: <p>I'm currently building an app where I need to save an array of tags into MongoDB using express js in Node Js. </p>
  
  <p>Here is the method I used for saving my tags as an array into MongoDB. </p>
  
  <pre><code>app.post('/upload', upload.single('meme'), function (req, res) {
      if (req.file) {
  
  //upload to cloudinary. 
  cloudinary.v2.uploader.upload(req.file.path, {use_filename: true, folder: 'test'},
      function(error, result) {
  //get the image name
  var filePath = req.file.originalname; 
  
  //instantiate the meme schema
  var newMeme = new meme(); 
  
  newMeme.imgs = filePath; 
  
  //get the caption form field value 
  newMeme.caption = req.body.caption;  
  
  //get the tags value from the form field. 
  
  newMeme.tags = req.body.tags.replace(/\s/g,'').split(',');
  
  //cloudinary url
  newMeme.url = result.url
  
  //encrypt the filepath 
  newMeme.memeid = hash.unique(filePath); 
  
  
  newMeme.save(function(err){
  
   if (err) throw err; 
  
  }); 
  
  res.cookie('filename',newMeme.url);
  
  //return res.send('sucessfully uploaded');
  
  res.redirect('meme/'+newMeme.memeid);
  
  }); 
  
  }else{
  //throw error message
  return res.send('failed to upload'); 
  
  }
  
  })
  </code></pre>
  
  <p>My Mongoose schema looks like this: </p>
  
  <pre><code>var memeSchema = mongoose.Schema ({
  
  imgs: String,       
  id: Number,
  memeid: String, 
  favorites: Number,
  url: String,  
  caption: String, 
  username: String,
  tags: [],  
  uploadDate: { type: Date, default: Date.now }
  });  
  </code></pre>
  
  <p>After saving, my DB looks something like this:</p>
  
  <pre><code> "tags": [
          "Suprised",
          "Laughing"
      ], 
  </code></pre>
  
  <p>Now when I want to display the tags, I'm having problem rendering the results properly. </p>
  
  <p>My desired result is to display them with link wrap around each result, not with comma. </p>
  
  <p>For example: <code>&lt;a href="/tags/suprised"&gt; Surprised &lt;/a&gt; &lt;a href="/tags/Laughing"&gt; Surprised &lt;/a&gt;</code></p>
  
  <p>This is the result I'm getting: <code>&lt;a href="/tags/Suprised,Laughing"&gt; Surprised, Laughing &lt;/a&gt;</code>  </p>
  
  <p>I want them to be separate. </p>
  
  <p>This is my route for displaying the result: </p>
  
  <pre><code>meme.find().sort(url).exec(function(err, result) { 
      //meme.find().sort({url}, function(err, result){
  
          if (err) throw err; 
          res.render('pages/index', {
  
              user: req.user, 
              pathi: result.map(i =&gt; i.memeid),
              path: result.map(u =&gt; u.url),
              caption: result.map(c =&gt; c.caption),
              tags: result.map(t =&gt; t.tags),  
              Title: 'Meme Search Engine'
  
          }); 
  
      });
  })   
  </code></pre>
  
  <p>Here is my EJS template for displaying the result: </p>
  
  <pre><code> &lt;% for(var i=0; i&lt;tags.length; i++) { %&gt;
  
  
        &lt;a href="tags/&lt;%= tags[i] %&gt;"&gt; &lt;%= tags[i] %&gt; &lt;/a&gt; 
  
  
  &lt;%}%&gt; 
  </code></pre>
  
  <p>I hope am not missing anything. </p>
  
  <p>How do I make my result separate instead of displaying with the comma?</p>
  
  <p>Thanks!</p>