How to get only loaded JSON keys and values from jquerymx Model? - javascript

I'm trying to write an ejs Template, which shows all key's and values from an javascript MVC Model. According to this this answer, I've tried the following:
Person.findOne({id: 51}, function(person) {
$("#editcustomerform").html('./html/person_2.ejs', person);
});
The ejs looks like this:
<form id="personForm">
<table class="ui-widget-content table">
<thead ><tr>
<th style=" width: 100px">Feld</th>
<th>Inhalt</th>
</tr></thead>
<tbody>
<% $.each(this, function(key, value){ %>
<tr>
<td><%= key %>:</td>
<td><input name="<%= key %>" id="<%= key %>" type="text" size="30" maxlength="30" value="<%= value %>"></td>
</tr>
<% }) %>
</tbody>
</table>
The loaded Data looks like the following:
{"id":51,"name":"Max","age":20}
Everything is working. The problem is, that all attributes like constructor, Class, update, etc. are shown in the form.
I didn't found a function from JavascriptMVC, which gives me only the loaded Json data.
Do I need to parse the attributes id, name and age manually or is there a better way?

Use .hasOwnProperty() to tell whether a property belongs to the object itself or was inherited from Object.

Related

Add and show result of the sum of columns in a table

Good day.
I am a beginner in this, I have a table with the following records and I want to add the Red Team, Yellow Team and Turquoise Equipment column and show the sum in the labels that are at the top of the table
For this I attach my html code with jsp and the reference image
Score Table
<div class="tabs-body">
<div class="tabs-item" id="tab1">
<div class="container">
<div class="con-contador">
<label>Puntaje Rojo :</label>
<label id="projo" class="contador"></label>
<label >Puntaje Amarillo :</label>
<label id="pamarillo" class="contador"></label>
<label>Puntaje Turqueza :</label>
<label id="pturqueza" class="contador"></label>
Reporte
</div>
<div class="table-responsive-vertical" >
<table id="reporte" class="table table-bordered table-striped table-hover table-mc-light-blue">
<thead>
<tr>
<th>Disciplina</th>
<th>Categoria</th>
<th>Genero</th>
<th style="background-color: red">Equipo Rojo</th>
<th style="background-color: yellow">Equipo Amarillo</th>
<th style="background-color: turquoise">Puntaje Turqueza</th>
</tr>
</thead>
<tbody>
<%
for (int i=0; i < v.size();i++){
puntaje p = (puntaje)v.elementAt(i);
%>
<tr>
<td data-title="Disciplina"><%=p.getNombredeporte()%></td>
<td data-title="Categoria"><%=p.getCategoria() %></td>
<td data-title="Genero"><%=p.getGenero() %></td>
<td data-title="Puntaje"><%=p.getPuntaje1() %></td>
<td data-title="Puntaje"><%=p.getPuntaje2() %></td>
<td data-title="Puntaje"><%=p.getPuntaje3() %></td>
</tr>
<%
}
%>
</tbody>
</table>
</div>
</div>
</div>
</div>
I understand that it can be done with a function in javascript but I am still a newbie, I ask for your kind support.
Firstly I'd say that JSP is Java Server Pages, not javascript. JSP code gets run (for example, generating puntaje sums) on the server before the webpage is returned to the web browser. In contrast, javascript code is executed after the webpage is returned to the web browser. Since you already have JSP code, why not just run your code server-side? Perhaps another "for" loop that runs to generate sums before your elements. That said, if you really want to use javascript then the general procedure will be: add another data-attribute to your points TDs, like
<td data-puntaje-rojo=<%=p.getPuntaje1() %>>
Add classed spans to your labels like:
<label>Puntaje Rojo : <span class="puntaje-sum-rojo"></span></label>
Then in your javascript, use some form of selector to iterate over a collection/array of the TDs and store the sum of all data-puntaje-rojo values. Then, use javascript or jquery to inject the appropriate sum value into the appropriate label span.
While best practice is to store your javascript code in an external file on your web server website location, you can also write javascript directly inside of your JSP page, the javascript code must be inside tags. And, it's best to have your javascript code run after your HTML is fully loaded: javascript and jquery both provide ways to accomplish that.

How to display multiple JSON objects in an ejs tag

I am making a table using NodeJS/JS/HTML/CSS/EJS. I want the table to be able to show to JSON objects in one column. When I use the code below, it runs fine, but it only prints out the second object given, not both.
Example: I am trying to print out the first and last name on one line, but it only shows the last name on the page (I'm assuming it's writing the firstName, but then overwriting it with the lastName.)
<div>
<table>
<% data2.forEach(function(person) {%>
<tr><td id="<%= person["ID"]%>"><%= person["firstName", "lastName"] %>
<% }); %></td></tr>
</table>
Figured it out for all who our interested in the future... Simple mistake
<div>
<table>
<% data2.forEach(function(person) {%>
<tr><td id="<%= person["ID"]%>"><%= person["firstName"] %> <%= person["lastName"] %>
<% }); %></td></tr>
</table>
</div>

Window and alert object/function not available in Underscore template?

I am trying to access a variable called teams in my Underscore template and is proving to be one of the most difficult things I have ever had to do. But my question right now is - why can't I call alert() or window.alert() inside my template javascript code?
here is the template:
<script id="user-home-main-table-template" type="text/template">
<table class="table">
<thead>
<tr>
<th>Club</th>
<th>Sport</th>
<th>Delete?</th>
</tr>
</thead>
<tbody>
<%
if(teams == null){
alert('teams is null'); //alert is not defined
window.alert('teams is null'); //window is not defined either
var teams = {};
}
for(var i=0; i
<teams.length; i++) { %>
<tr>
<td>
<a class="font-big" href='/users/<%=user._id%>/teams/<%=teams[i]._id%>/teamDashboard'>
<%=teams[i].club %>
</a>
</td>
<td>
<a class="font-big" href='/users/<%=user._id%>/teams/<%=teams[i]._id%>/teamDashboard'>
<%=teams[i].sport %>
</a>
</td>
<td>
<a class="btn btn-warning" onclick=window.userHomeMainTableView.deleteTeam('<%=teams[i]._id%>');>delete</a>
</td>
</tr>
<% } %>
</tbody>
</table>
</script>
for some reason alert() and window.alert() are not available inside this template script. Is there a good reason for this?
Yes, there is a good reason for it.
Your template is executed with the data you pass into it.
From the documentation:
When you evaluate a template function, pass in a data object that has properties corresponding to the template's free variables
var compiled = _.template("hello: <%= name %>");
compiled({name: 'moe'});
=> "hello: moe"
So, when you send your data to the template, it does not contains a window property - nor should it!
If you need to debug the function execution, simply step inside the template execution during runtime. In Chrome, while in debug mode, you can "Step Into" by pressing F11.

Getting undefine trying to get the ObjectId of a Collection

i'm making a voting system for a Message Board app using Backbone.
The problem here is that when i try to get the objectId of an object and set it as a "rel" attribute in a certain tag the attribute is set as "undefined" .
<% if(models.length>0) {
_.each(models, function(value, key, list) {%>
<tr>
<td><%= value.attributes.username %></td>
<td><%= value.attributes.message %></td>
<td>
<table>
<tr>
<td><a id="voteUp" class="btn btn-default btn-sm" rel="<%= value.attributes.objectId%> "><img width="30" src="img/appbar.thumbs.up.png"/></a></td>
<td width="30">
+<%= value.attributes.thumbsup %>
</td>
<td>
<a id="voteDown" class="btn btn-default btn-sm" rel=" <%= value.attributes.objectId %> "><img width="30" src="img/appbar.thumbs.down.png"/></a>
</td>
<td width="30">
-<%= value.attributes.thumbsdown %>
</td>
</tr>
</table>
</td>
</tr>
<% });
In my DB on Parse the objectId is show but i only can access to username, message, thumbsup, thumbsdown.
Here is my jsfiddle with my complete home.html and app.js
I think you should debug the backbone/parse collection layer and first determine what TYPE reference you are dealing with??
attributes OR objects at the level of entries in the backbone collection
The answer to that determines how you get backbone to unwrap the individual collection entries.
Note this thread remembering that parse referents can be a little finicky regarding the valueOf(objectId).
If you are getting other field values OK from the target class and the objectId is the only one with bug, then this is definitely the issue.

Ruby on Rails: error when using unobtrusive JavaScript to update partial

I am using Rails 3.2.13, and I'm trying to update a 'summary' partial after creating a 'child' item.
I have a template and template tasks, and what I am trying to do is update the partial on the 'show' view, which is a summary that indicates how many tasks are allocated to the template. I am doing this in the create.js.erb of the template task.
Here are the contents of _template-summary.html.erb:
<div id="template-summary-details">
<table class="table table-striped">
<tbody>
<tr>
<td><span class="fa fa-th-list"></span> No. of tasks</td>
<td><%= #template.templatetasks.count %></td>
</tr>
<tr>
<td><span class="fa fa-clock-o"></span> Total task days</td>
<td>
<%= #template.templatetasks.sum(:days) %>
</td>
</tr>
<tr>
<td><span class="fa fa-check-square-o"></span> No. of checklists</td>
<td>
<%= #template.templatetasks.count(:checklist_id) %>
</td>
</tr>
</tbody>
</table>
</div>
And here are the contents of create.js.erb:
<% #template = Template.where("id = ?", #templatetask.template_id?) %>
$("#template-summary-details").replaceWith("<%= escape_javascript(render partial: "templates/template-summary", locals: {template: #template}) %>");
<% if #templatetask.parent_id? %>
$('#templatetasks'+<%= #templatetask.parent_id %>).prepend('<%= j render(#templatetask) %>');
<% else %>
$('#templatetasks').prepend('<%= j render(#templatetask) %>');
<% end %>
The problem is that I am getting the following error:
undefined method `where' for ActionView::Template:Class
I have also tried using find but haven't gotten that to work either.
How else would I pass the #template to the partial during the creation of a template task?
You first problem is that you have a name clash between the Rails class ActionView::Template and your Template model class. You can work around that by referring to your model class as ::Template (a top-level Ruby class). e.g.
<% #template = ::Template.where("id = ?", #templatetask.template_id).first %>
But that is just a round about way of doing a primary key lookup which is simpler with find:
<% #template = ::Template.find(#templatetask.template_id) %>
Even easier, if you have already set up a belongs_to association from TemplateTask to Template you could just refer to the related object directly:
<% #template = #templatetask.template %>
That would probably get you a bit further but if you want to make your partials more reusable its might be better to avoid having them refer to instance variables (e.g. #template). Instead the partial should refer to a local template variable that you pass into the render method via the locals hash (which you are already doing).

Categories