We Keep Coding

Remove whitespaces from variable in HTML

I have the following table in HTML and I want to remove all whitespaces from variable item.book.How can I do it?
<table>
<theader>
<tr>
<th>Livro</th>
<th>Autor da Review</th>
<th>Review</th>
<th>Link</th>
</tr>
</theader>
<tbody>
<% list.forEach((item,index)=>{ %>
<tr>
<td><%= item.book %></td>
<td><%= item.name %></td>
<td> <%= item.desc %></td>
<td id="link"> <a href=/review/<%= item.email %>/ <%= item.book %>> /review/<%= item.email %>/<%= item.book %> </a></td>
</tr>
<% })%>
</tbody>
</table>

Access values of array within array within object

I have an object
{
'Bob Joerson': [
[ 'Tuesday March 31, 2020', '07:58:12.0' ],
[ 'Wednesday April 1, 2020', '11:00:03.7' ]
],
'Joe Bobberson': [
[ 'Tuesday March 31, 2020', '07:58:12.0' ],
[ 'Wednesday April 1, 2020', '11:00:03.7' ]
]
}
How would I access the information within the array within the array?
I have tried:
<% for(var key in timesheets){ %>
<% if(timesheets.hasOwnProperty(key)){ %>
<% a = 0 %>
<table id="timesheetTable" class='table-primary table-bordered table' style='border-spacing: 10px;'>
<tr>
<td rowspan="2" id="name"> <%= key %> </td>
<% for(var value in key){ %>
<td> <%= value %> </td>
<% } %>
</tr>
</table>
<% a++ %>
<% } %>
<% } %>
But value just outputs the string index for the name stored in key.
When I try
<h1>Timesheet for dates</h1>
<% for(var key in timesheets){ %>
<% if(timesheets.hasOwnProperty(key)){ %>
<% a = 0 %>
<table id="timesheetTable" class='table-primary table-bordered table' style='border-spacing: 10px;'>
<tr>
<td rowspan="2" id="name"> <%= key %> </td>
<% for(i = 0; i < key.length; i++){ %>
<td> <%= key %> </td>
<% } %>
</tr>
</table>
<% a++ %>
<% } %>
<% } %>
It just outputs the names over and over again in a table.

Try this:
<% for(var key in timesheets){ %>
<% if(timesheets.hasOwnProperty(key)){ %>
<% a = 0 %>
<table id="timesheetTable" class='table-primary table-bordered table' style='border-spacing: 10px;'>
<tr>
<td rowspan="2" id="name"> <%= key %> </td>
<% for(var value of timesheets[key]){ %>
<td> <%= value[0] %><%= value[1] %> </td>
<% } %>
</tr>
</table>
<% a++ %>
<% } %>
<% } %>
Note that key is each key of timesheets so timesheets[key] will be the value(array of arrays) of that key.

try something like this:
<% for(var entry of timesheets[key]){ %>
<td> Date: <%= entry[0] %> </td>
<td> Time: <%= entry[1] %> </td>
<% } %>

readyException.js:6 Uncaught TypeError: Cannot read property 'mData' of undefined

I am having problems with Data tables on Rails 6.0.0
I used the Data tables CDN, the styles changed but the functionalities of data tables are not loading.
this is my html
<table id="example" class="title table index-table">
<tr>
<th>Title</th>
<% if #user['role'] === 'admin' or #user['role'] === 'instructor' %>
<th>Tags</th>
<% end %>
</tr>
<% #assignments.each do |hw| %>
<tr>
<% if #user['role'] === 'admin' or #user['role'] === 'instructor' %>
<td>
<span class="hw-title"><%= link_to hw.title, assignment_path(hw) %></span>
</td>
<% else %>
<td>
<span class="hw-title"><%= link_to hw.title, new_assignment_solution_path(hw) %></span>
</td>
<% end %>
<% if #user['role'] === 'admin' or #user['role'] === 'instructor' %>
<td>
<% if hw.tags.empty? %>
<em></em>
<% else %>
<% hw.tags.each do |tag| %>
<% unless tag.name.include? ' ' %>
<span class="hw-tag">#<%= tag.name %></span>
<% else %>
<% words = tag.name.split(' ') %>
<% words.each do |word| %>
<span>
#<%= word.strip %>
</span>
<% end %>
<% end %>
<% end %>
<% end %>
</td>
<% end %>
</tr>
<% end %>
</table>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable();
});
</script>
this is the script in the application.html.erb
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
is a simple table but it has some validations, which makes the tags unequal to the any clues? Thanks

Solved it. I just needed to add <thead> and the <tbody> tags
Let me know if this worked for somebody
<table id="example" class="title table index-table">
<thead>
<tr>
<th>Title</th>
<% if #user['role'] === 'admin' or #user['role'] === 'instructor' %>
<th>Tags</th>
<% end %>
</tr>
</thead>
<tbody>
<% #assignments.each do |hw| %>
<tr>
<% if #user['role'] === 'admin' or #user['role'] === 'instructor' %>
<td>
<span class="hw-title"><%= link_to hw.title, assignment_path(hw) %></span>
</td>
<% else %>
<td>
<span class="hw-title"><%= link_to hw.title, new_assignment_solution_path(hw) %></span>
</td>
<% end %>
<% if #user['role'] === 'admin' or #user['role'] === 'instructor' %>
<td>
<% if hw.tags.empty? %>
<em></em>
<% else %>
<% hw.tags.each do |tag| %>
<% unless tag.name.include? ' ' %>
<span class="hw-tag">#<%= tag.name %></span>
<% else %>
<% words = tag.name.split(' ') %>
<% words.each do |word| %>
<span>
#<%= word.strip %>
</span>
<% end %>
<% end %>
<% end %>
<% end %>
</td>
<% end %>
</tr>
<% end %>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable();
});
</script>

Editable row in rails using java script

I want to make each row editable in table. For this I place rows with text_fields in each bellow the row with table data.
<style>
.dtr{
display:none;
}
</style>
<body>
<div class="container" align="center">
<h1>Products Description</h1>
</div>
<br />
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Product Name</th>
<th scope="col">Product Description</th>
<th scope="col">Brand Name</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<% #csv_table.each do |row| %>
<tr class="mtr">
<% row.each do |key, value| %>
<%unless key == "id"%>
<td class="value"><%= value %></td>
<%end%>
<% end %>
<td>
<div class="edit">
<%=link_to "Edit",class: 'form-control' %>
</div>
<div class="delete">
<%=link_to "Delete",class: 'form-control' %>
</div>
</td>
</tr>
<tr class="dtr">
<td>
<%= text_field_tag :login_aei2, "", class: 'form-control' %>
</td>
<td>
<%= text_field_tag :login_aei3, "", class: 'form-control' %>
</td>
<td>
<%= text_field_tag :login_aei4, "", class: 'form-control' %>
</td>
<td>
<%=link_to "Save", remote: true, class: 'form-control' %>
</td>
</tr>
<%end%>
</tbody>
</table>
</body>
<script>
$(document).ready(function(){
$(".edit").click(function(){
debugger;
var mtr = this.closest(".mtr");
mtr.style.display = "none";
mtr.nextElementSibling.style.display="inline";
// this.parentElement.parentElement.style.display='none';
event.preventDefault();
});
});
</script>
When I click on edit button current row become hidden and the row with input field get shown but the problem is, it shows only in area of table data not in whole row. please help. Thanks in advance

So when the user click on "edit", its necessary to know exactly what Info has been clicked, in order to update to the database, and in order to show and hide the infos.
The changes that I've made is based on a demo-data that I've created to develop this solution:
#csv_table = [ {id:3, product: "Product", description: "Description",
brand:"Brand", action: "Action" }, {id:4, product: "Product2",
description: "Description2", brand:"Brand2", action: "Action2" }]
This is so called "Array of Hashes", and I thought that was what you were using too.
In the complete code, as we iterate throught the array, we can see two values that are name, and value. I used "value" instead of id, because I didnt want to cause a html conflict. So you can see in the code this:
<% value = row[:id] %>
And this
<% name = key[0] %>
Then each row has the field, and has the info (but one of them is hidden), like so:
<td class="value">
<a id=<%= "info_#{name}#{value}" %> class="info <%= "info_dtr#{value}" %>" name=<%= name %> value=<%= value %>><%= row[name] %></a>
<%= text_field_tag :login_aei, "", class: "form-control field field_dtr#{value}", id: "field_#{name}#{value}" %>
</td>
Can you notice that the id it has name and value? In that way we can tell JQuery to look for the field we have clicked. For example info_product1, and field_product1, and set it to hide(); or show();. Below is the complete code, these are mostly javascript and html tricks, so you can try to play around a little bit:
Ruby + Html:
<style>
.dtr{
display:none;
}
</style>
<div class="container" align="center">
<h1>Products Description</h1>
</div><br />
<table class="table table-striped" border=2 style="border: 2px solid;">
<thead>
<tr>
<th scope="col">Product Name</th>
<th scope="col">Product Description</th>
<th scope="col">Brand Name</th>
<th scope="col">Action</th>
<th></th>
</tr>
</thead>
<tbody>
<% #csv_table.each_with_index do |row, i|%>
<% value = row[:id] %>
<tr class="mtr">
<% row.each_with_index do |key, j| %>
<% name = key[0] %>
<% unless j==0 %>
<td class="value">
<a id=<%= "info_#{name}#{value}" %> class="info <%= "info_dtr#{value}" %>" name=<%= name %> value=<%= value %>><%= row[name] %></a>
<%= text_field_tag :login_aei, "", class: "form-control field field_dtr#{value}", id: "field_#{name}#{value}" %>
</td>
<% end %>
<% end %>
<td>
<%= link_to "Save", {}, remote: true, class: 'form-control save', 'value' => value %>
<div class="delete"><%=link_to "Delete",class: 'form-control'%></div>
</td>
</tr>
<% end %>
</tbody>
</table>
</body>
Javascript:
$(document).ready(function(){
$(".field").hide();
});
$(".info").click(function(event){
console.log("info");
name = $(this).attr("name");
id = $(this).attr("value");
console.log($(this).attr("value"));
$("#info_" + name + id).hide();
$("#field_" + name + id).show();
});
$(".save").click(function(event){
event.preventDefault();
// { .. if saves}
console.log("salvar");
id = $(this).attr("value");
$(".field_dtr" + id).hide();
$(".info_dtr" + id).show();
});

SyntaxError: missing ) after argument list in while compiling ejs

I am getting the error: missing ) after argument list while compiling ejs.
I tried many times, but I can't find the problem.
Here's the ejs that causes errors.
What is the problem with this code?
<%- include('../_layouts/adminheader') %>
<h2 class='page-title'>Products</h2>
<br>
Add a new product
<br><br>
<% if (count > 0) { %>
<table class="table table-striped">
<thead>
<tr class="home">
<th>Product</th>
<th>Price</th>
<th>Category</th>
<th>Product Image</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<% products.forEach(function(product) { %>
<tr>
<td><%= product.title %></td>
<td>$<%= parseFloat(product.price).toFixed(2) %></td>
<td><%= product.category %></td>
<td>
<% if (product.image == "") { %>
<img src="/images/noimage.png">
<% } else { %>
<img src="product_images/<%= product._id %>/<%= product.image %>">
<% }%>
</td>
<td>Edit</td>
<td>Delete</td>
<% } %>
</tr>
<% }); %>
</tbody>>
</table>>
<% } else { %>
<h3 class="text-center">There are no products.</h3>>
<% } %>
<%- include('../_layouts/adminfooter') %>

Before your closing </tr>, the line
<% } %>
is superfluous. The parser therefore interprets this as ending the callback function of forEach() without providing further arguments or closing the
round bracket of the function call. (The error message is actually pretty clear about what's going on, if you think about it. :))
By the way you also got two superflous > behind your closing </tbody> and </table>.
Here's a working fixed code example you can put into https://ionicabizau.github.io/ejs-playground/
<%
var products = [
{title: "foobar", category: "things", image: "", _id: 1, price: 0}
];
var count = products.length;
%>
<h2 class='page-title'>Products</h2>
<br>
Add a new product
<br><br>
<% if (products.length > 0) { %>
<table class="table table-striped">
<thead>
<tr class="home">
<th>Product</th>
<th>Price</th>
<th>Category</th>
<th>Product Image</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<% products.forEach(function(product) { %>
<tr>
<td><%= product.title %></td>
<td>$<%= parseFloat(product.price).toFixed(2) %></td>
<td><%= product.category %></td>
<td>
<% if (product.image == "") { %>
<img src="/images/noimage.png">
<% } else { %>
<img src="product_images/<%= product._id %>/<%= product.image %>">
<% }%>
</td>
<td>Edit</td>
<td>Delete</td>
</tr>
<% }); %>
</tbody>
</table>
<% } else { %>
<h3 class="text-center">There are no products.</h3>>
<% } %>