how can I loop through this referenced data (tagged episode) in ejs - node.js

I basically want to display the episodes nested in tvSeason which is also nested in seriesMovie
<% seriesMovie.tvSeasons.forEach(function(tvSeason) { %>
<h1>
<%= tvSeason["episodes"].episode_number %>
</h1>
<% }) %>
"tvSeasons" : [
{
"season_id" : "4321",
"episode_count" : "22",
"season_number" : "1",
"overview" : "nothing",
"image_path" : "grey.jpg",
"release_date" : "2005-12-24",
"episodes" : [
{
"episode_id" : "4553",
"episode_number" : "1",
"episode_title" : "rage",
"image_path" : "rey.jpg",
"video_path" : "rom.mp4",
"episode_runtime" : "42"
}
]
]
episode_number is not defined

Why doesn't it work ?
It seems that episodes is an array... So if you want to access the first episode, just indicate the episode[0] ...
<% seriesMovie.tvSeasons.forEach(function(tvSeason) { %>
<h1>
<%= tvSeason["episodes"][0].episode_number %>
</h1>
<% }) %>

Because "episodes" is a list holding objects. You should first access the element you want in that list then call episode number upon that. Somethin like this
tvSeason["episodes"][0].episode_number

Related

How to render data in groups to ejs

I want to display data that has been grouped into the EJS?
I have the following data:
"results": {
"Angular CLI": [
{
"category_name": "Angular CLI",
"article_title": "Mengenal Framework Angular CLI"
}
],
"Tips dan Trik": [
{
"category_name": "Tips dan Trik",
"article_title": "Tutorial : Cara Membuat Repositori Github Private"
},
{
"category_name": "Tips dan Trik",
"article_title": "Mengenal Fitur Media Query pada CSS"
}
]
}
Following on the EJS file:
<% results.forEach(function(data) { %>
<div>
<p><%= data %></p>
</div>
<% }); %>
But it does not display data at all.
EDIT :
Dear all, thank you for giving some explanation. So that I can find a solution to this problem.
<% for (let category in results) { %>
<b><%= category %></b>
<% results[category].forEach((data, key) => { %>
<p><%= data.article_title %></p>
<% }) %>
<% } %>
Provided your object is something like this below
var obj = {"results": {
"Angular CLI": [
{
"category_name": "Angular CLI",
"article_title": "Mengenal Framework Angular CLI"
}
],
"Tips dan Trik": [
{
"category_name": "Tips dan Trik",
"article_title": "Tutorial : Cara Membuat Repositori Github Private"
},
{
"category_name": "Tips dan Trik",
"article_title": "Mengenal Fitur Media Query pada CSS"
}
]
}
As your obj.results is object and not array, you could iterate through all properties of obj.results object and display values like this
<% for (var prop in obj.results) { %>
<div>
<p><%= prop%> : <%= results[prop] %></p>
</div>
<% }); %>
Let me know if I misunderstood your issue

ejs forEach function not working for json data in node

forEach is not a function when I am iterating json file in ejs using nodejs giving some error while iterating.. below is three section what i have done in .ejs file, json and nodeJS
Here is my JSON Data
<pre>
{
"MenuName": "Main Menu Here",
"widget": {
"window": {
"data": "Click Here",
"title": "Sample Konfabulator Widget",
"name": "main_window",
"width": 500,
"height": 500
},
"window": {
"data": "Click Here",
"src": "Images/Sun.png",
"name": "sun1",
"hOffset": 250,
"vOffset": 250,
"alignment": "center"
},
"window": {
"data": "Click Here",
"size": 36,
"style": "bold",
"name": "text1",
"hOffset": 250,
"vOffset": 100,
"alignment": "center",
"onMouseUp": "sun1.opacity = (sun1.opacity / 100) * 90;"
}
}
}
</pre>
This is my ejs
<html>
<head>
<title><%= title %></title>
</head>
<body>
<h1> My Name Is <%= title %></h1>
<h1> My Name Is <%= printIt.MenuName %></h1>
<ul>
<% printIt.widget.forEach(function(item){%>
<li><%= item.window.data%></li>
<% }); %>
</ul>
</body>
</html>
</pre>
in NodeJS
<pre>
app.locals.printIt = require("./sample.json");
</pre>
I can able to print
My Name Is <%= title %> and My Name Is <%= printIt.MenuName %>
What i missed here..?
First of all, your JSON data will keep only single record of widget window and which is last one. Because window key will overwrite previous hold value.
Update your script with this one
<ul>
<% for(var item in printIt.widget){%>
<li><%= printIt.widget[item].data%></li>
<% } %>
</ul>
Hope this will help to solve your query !!

Whitespace when rendering using EJS

I want to pass an Object rendered using EJS them pass into an polymer element.
Why I got addressLine1":"123" abc", what wrong with whitespace character and is there any way to pass object into polymer element without expose it on HTML like this.
EJS
<g-map customer=<%- JSON.stringify(customer) %> vehicles = <%= JSON.stringify(vehicles) %> ></g-map>
After rendering :
<g-map customer="{"_id":"5658013d7e6908d4b370c3f0","coordinates":[10.764221,106.656368],"phone":"09090909","addressLine1":"123" abc","email":"customer1#gmail.com"}="">
Routes file :
res.render('vehicles',
{
title: 'Vehicles Managerment',
customer : req.session.customer,
vehicles : body.data
});
customer object
"customer": {
"_id": "5658013d7e6908d4b370c3f0",
"coordinates": [
12345,
12345
],
"addressLine1": "123 ABC",
"email": "customer1#gmail.com",
"username": "customer1#gmail.com"
}
After researching, I've figured out that I have to put rendered object in single quote mark, so it will treat whitespace the right way.
<g-map customer='<%- JSON.stringify(customer) %>' vehicles = '<%= JSON.stringify(vehicles) %>'

filter.commentAfter by Emmet in Sublime Text 3 not work

In Emmet by ST3, I tried to customize a little comment after giving tab when creating a label, for example #div or .span
I read that this was a solution in the settings of Emmet (Emmet.sublime-settings):
"preferences": {
"filter.commentAfter" : "<!-- <%= attr('id', '#') %> <%= attr('class', '.') %> -->",
"filter.commentBefore" : "<!-- <%= attr('id', '#') %> <%= attr('class', '.') %> -->"
}
But not work. Please Help
In your User/Emmet.sublime-settings file make sure you have your structure like this
{
"preferences": {
"filter.commentAfter" : "<!-- <%= attr('id', '#') %> <%= attr('class', '.') %> -->",
"filter.commentBefore" : "<!-- <%= attr('id', '#') %> <%= attr('class', '.') %> -->"
}
}
and it should work.
Make sure you dont forget about the |c at the end
div#test.myclass|c
As an extra if you want to automatically add the c filter you should set your syntaxProfiles to something like this
{
"preferences": {
},
"syntaxProfiles": {
"html" : {
// auto add the comments
"filters": "html,c"
}
}
}
make sure it's on the same level as preferences

node-localize : Save and render html syntax and tags information in translation files

I'm using Node.js and ExpressJS with node-Localize (https://github.com/AGROSICA/node-localize) for a web site.
I have a web page that contains a biography splitted by multiples paragraphes (<p></p>).
Is there a way to save and render html syntax and tags information in my translation file ?
"Bio" : {
"en-US" : "<p>A first paragraphe of information</p><p>And a second one</p>",
"fr" : "<p>Un premier paragraphe d'information</p><p>Et un deuxième</p>"
}
/*And the html...*/
<%= translate("Bio")%>
Because I don't want to use the following syntax
"BioParagraphe1" : {
"en-US" : "A first paragraphe of information",
"fr" : "Un premier paragraphe d'information"
},
"BioParagraphe2" : {
"en-US" : "And a second one",
"fr" : "Et un deuxième"
}
/*And the html...*/
<p>
<%= translate("BioParagraphe1")%>
</p>
<p>
<%= translate("BioParagraphe2")%>
</p>
I found a solution, I was able to render my html content from a string using the following sintax
/*I'm using the "<%-" instead of the "<%=" */
<%- translate("BioParagraphe1")%>

Resources