How to convert object to list in javascript? - javascript

I need to convert this object into list in expressJS view (using EJS):
{https://ae01.alicdn.com/kf/HTB12Xa4ipGWBuNjy0Fbq6z4sXXa3/Mickey-Mouse-Microwave-Glove-Potholder-Bakeware-Blue-and-White-100-Cotton-Oven-Mitts-and-Potholder-mat.jpg,https://ae01.alicdn.com/kf/HTB10xfciv9TBuNjy1zbq6xpepXaG/Mickey-Mouse-Microwave-Glove-Potholder-Bakeware-Blue-and-White-100-Cotton-Oven-Mitts-and-Potholder-mat.jpg,https://ae01.alicdn.com/kf/HTB13AHqcfiSBuNkSnhJq6zDcpXav/Mickey-Mouse-Microwave-Glove-Potholder-Bakeware-Blue-and-White-100-Cotton-Oven-Mitts-and-Potholder-mat.jpg}
I've tried :
<% const xx = result.data[0].galleryimages.replace('{',"['").replace('}',"']").split(',') %>
<% for (let j=0; j<xx.length; j++) { %>
<%= xx[j]%>
<% } %>
but it returns :
['https://ae01.alicdn.com/kf/HTB12Xa4ipGWBuNjy0Fbq6z4sXXa3/Mickey-Mouse-Microwave-Glove-Potholder-Bakeware-Blue-and-White-100-Cotton-Oven-Mitts-and-Potholder-mat.jpg https://ae01.alicdn.com/kf/HTB10xfciv9TBuNjy1zbq6xpepXaG/Mickey-Mouse-Microwave-Glove-Potholder-Bakeware-Blue-and-White-100-Cotton-Oven-Mitts-and-Potholder-mat.jpg https://ae01.alicdn.com/kf/HTB13AHqcfiSBuNkSnhJq6zDcpXav/Mickey-Mouse-Microwave-Glove-Potholder-Bakeware-Blue-and-White-100-Cotton-Oven-Mitts-and-Potholder-mat.jpg']

What you posted is not an object, it's a string - try:
const xx = result.data[0].galleryimages.replace(/[{}]/, '').split(',')

problem solved
<% let xx = result.data[0].galleryimages.slice(1,-1).split(",") %>
<% for (let j=0; j<xx.length; j++) { %>
<% let ha = xx[j].slice(1,-1); %>
<img src=<%= ha.replace("'","") %> width="10%"/>
<% } %>

Related

How to loop attributes of an object on EJS?

I am creating sort of an api app with node.js, express, body-parser, ejs, fs. I have the server running and everything else working. The problems is that have an object(JSON file) that is parsed, but I can't get access to certain attributes when using my index.ejs template:
{
"x":{
"color": "black"
"total": 1
},
"y":{
"color": "red"
"total": 5
}
}
My javascrip file has the following function that loops trough the file.
var keys = Object.keys(Obj);
for (var i = 0; i< keys.length; i++){
var k = keys[i];
var colorKey = Obj[k].color;
var totalKey = Obj[k].total;
}
var db = keys;
res.render("index", {
db: db
}
Then on my index.ejs I have the code that works with the first attribute ("x" and "y") but can't access the rest.
Welcome to the main page!
<% for (var i = 0; i < db.length; i++) { %> ////This is the for loop that shows "x" and "y"
<h1> We have the variable: <%= db[i] %> </h1>
<h1> The color is: <%= db[i].color %></h1>
<h1> There is <%= db[i].total %> left!</h1>
<% } %>
The page shows both variables 's but shows nothing when it comes to color and total. Is there a way to loop those in ejs?
I presume you don't actually need the preprocessing. Instead, you can do can make an array of keys
db = /* the source object */
const keys = Object.keys(db)
res.render("index", { db })
<% for (let i = 0; i < keys.length; i++) { %>
<h1> We have the variable: <%= keys[i] %> </h1>
<h1> The color is: <%= db[keys[i]].color %></h1>
<h1> There is <%= db[keys[i]].total %> left!</h1>
<% } %>

function to get position in two arrays

In javascript or EJS
Hi, I have the followings arrays
ID totales: 76,76,76,78,17,37,30,177,30,177,1,2,3,5,64,30,31,35,36,17,17,37,76,1,2,3,5,35,37,33,30,31,35,36,17,17,37,17,37,35,37,80,35,37,1,2,3,5,1,2,3,5,1,2,3,5,81,76,30,31,35,36,17,1,2,3,5,81,0,76,64,61,21,22,18,24,19,26,35,37,17,37,17,37,17,37
Porcantes Totales: 70,70,100,100,70,70,85,60,100,100,66.7,100,100,50,100,70,80,70,50,90,90,40,100,66.7,100,100,50,70,90,60,30,90,60,50,60,80,40,60,60,40,60,11.1,80,80,66.7,100,100,50,66.7,100,100,50,66.7,100,100,50,0,100,40,60,40,50,70,66.7,100,100,50,100,60,0,0,50,70,70,100,70,80,60,80,80,20,50,50,70,60,50
ID propios: 30,177
I need to get the position in "ID totales" where are "ID propios" that is to say 30 and 177,
with the purpose of get the same position in "Porcantes Totales" and may to make a sum with the values in the position of 30 and position of 177, this by separate parts and store them in a variable
thanks
In javascript or EJS
the code is
result.forEach(function(results){ %>
<%long=(results.category_results.length)
for(i=0; i<long; i++){ %>
<%results.category_results[i].category_id%>
<%listRP.push(results.category_results[i].category_id)%>
<%listResPropio=listRP%>
<br><br><br>
<% } %>
<% }) %>
<%
listR=[]
listP=[]
allResult.forEach(function(allR){ %>
<%long=(allR.category_results.length)
for(i=0; i<long; i++){ %>
<%allR.category_results[i].category_id%>
<%listR.push(allR.category_results[i].category_id)%>
<%listP.push(allR.category_results[i].percentage)%>
<%listaResultados=listR%>
<%listaPorcentajes=listP%>
<% } %>
<% }) %>
<%aaaa = []
var a
var b
%>
ID totales: <%=listaResultados%><br>
Porcantes Totales: <%=listaPorcentajes%><br>
ID propios: <%=listResPropio%><br>
<% for(i=0; i<listaResultados.length; i++){ %>
<% for(a=0; a<listResPropio.length; a++){ %>
<% if(listaResultados[i]==listResPropio[a]){ %>
<% a=listaResultados[i] %>
<%= a %>
<% } %>
<% } %>
<% } %>
This should do the work
var ID_totales = [76,76,76,78,17,37,30,177,30,177,1,2,3,5,64,30,31,35,36,17,17,37,76,1,2,3,5,35,37,33,30,31,35,36,17,17,37,17,37,35,37,80,35,37,1,2,3,5,1,2,3,5,1,2,3,5,81,76,30,31,35,36,17,1,2,3,5,81,0,76,64,61,21,22,18,24,19,26,35,37,17,37,17,37,17,37]
var Porcantes_Totales = [70,70,100,100,70,70,85,60,100,100,66.7,100,100,50,100,70,80,70,50,90,90,40,100,66.7,100,100,50,70,90,60,30,90,60,50,60,80,40,60,60,40,60,11.1,80,80,66.7,100,100,50,66.7,100,100,50,66.7,100,100,50,0,100,40,60,40,50,70,66.7,100,100,50,100,60,0,0,50,70,70,100,70,80,60,80,80,20,50,50,70,60,50]
function ID_propios(ID){
return ID.map(a=>Porcantes_Totales[ID_totales.indexOf(a)]).reduce((a,b)=>a+b)
}
console.log(
ID_propios([30, 177])
)

set value to devise form value with Javascript

I have this makeid function which returns a random string of 10 characters
function makeid() {
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for (var i = 0; i < 10; i++)
text += possible.charAt(Math.floor(Math.random() * possible.length));
return text;
}
I want to manually put this string to my devise form like this :
<div class="user_field">
<div class="email">`enter code here`
<%= f.label :email %><br />
</div>
<%= f.email_field :email, autofocus: true, autocomplete: "email" , value: <script>makeid();</script>%>
</div>
Any thoughts??
Rewrite your makeid function as a ruby method, and put it into app/helpers/application_helper.rb
def makeid
(('A'..'Z').to_a + ('a'..'z').to_a + (0..9).to_a).sample(10).join()
end
Then you can call that helper in your templates:
<div class="user_field">
<div class="email">`enter code here`
<%= f.label :email %><br />
</div>
<%= f.email_field :email, autofocus: true, autocomplete: "email" , value: makeid() %>
</div>

Accessing specific member of an ArrayList using Javascript

So, I have a table in a jsp page which shows the data fetched from a database via an ArrayList forwarded to the page. Each row of the table has a radio button corressponding to it. Now, I would like to access the elements in the row (the ArrayList's members on the selection of the corresponding radio button and then click of an 'edit' button)
Any thoughts as to how to achieve this would be very much appreciated. Here's my code for a bit intro.
<%
ArrayList<requestbean> reqjsp = new ArrayList<requestbean>();
reqjsp = (ArrayList<requestbean>) (request.getAttribute("reqdb"));
%>
<script type ="text/javascript">
function x() {
var ele = document.getElementsByName('reqradio');
var i = ele.length;
for ( var j = 0; j < i; j++ ) {
if ( ele[j].checked ) {
document.getElementById("edireq").disabled = false;
alert('request ' + ( j + 1 ) + ' selected');
//Here is where the functionality is desired to access reqjsp.get(j)
}
}
}
</script>
<input type="button" name="edireq" id="edireq" onclick="x()" value="Edit Request">
These are a few columns in my table.
<%
for ( int i = 0; i < reqjsp.size(); i++ ) {
%>
<tr>
<td> <input type="radio" name="reqradio" id="req<%=(i+1) %>"></td>
<td><%= reqjsp.get(i).getRequestid() %></td>
<td><%= reqjsp.get(i).getRequestor() %></td>
<td><%= reqjsp.get(i).getApprover() %></td>
</tr>
<%} %>
You could generate a JavaScript array with JSP code and then access this generated variable in your JavaScript. But you would not be able to change anything in the underlying Java object this way:
<script type ="text/javascript">
<%
ArrayList<requestbean> reqjsp = new ArrayList<requestbean>();
reqjsp = (ArrayList<requestbean>) (request.getAttribute("reqdb"));
%>
var myJsArray = new Array();
<%
for ( int i = 0; i < reqjsp.size(); i++ ) {
%>
myJsArray.push('<%= reqjsp.get(i) %>');
<%
}
%>
// JavaScript code to access the myJsArray array
</script>
The JSP code will generate this kind of code:
<script type ="text/javascript">
var myJsArray = new Array();
myJsArray.push('value1');
myJsArray.push('value2');
myJsArray.push('value3');
// JavaScript code to access the myJsArray array
</script>

Endless scrolling will_paginate is not working in ruby on rails

I am following this railcasts to integrate endless scrolling in my rails application. Here i am doing like this..
static_pages_controller.rb --
def home
#posts = Post.paginate(page: params[:page],:per_page => 10)
end
home.html.erb --
<div id="posts_list" style="height:300px; overflow:scroll">
<%= render :partial => "posts/posts" %>
<p id="loading">Loading more page results... </p>
</div>
Partial posts/posts ---
<% if #posts.any? %>
<div id="postlist">
<ul>
<%= render partial: 'posts/posts_item', collection: #posts %>
</ul>
</div>
<% end %>
Partial posts/posts_item --
<li><%= posts_item.title %></li>
<li><%= posts_item.content %></li>
my static_pages/home.js.erb--
page.insert_html :bottom, :posts, :partial => #posts
if #posts.total_pages > #posts.current_page
page.call 'checkScroll'
else
page[:loading].hide
end
and my assets/javascripts/endless_page.js --
var currentPage = 1;
function checkScroll() {
if (nearBottomOfPage()) {
currentPage++;
new Ajax.Request('/?page=' + currentPage, {asynchronous:true, evalScripts:true, method:'get'});
} else {
setTimeout("checkScroll()", 250);
}
}
function nearBottomOfPage() {
return scrollDistanceFromBottom() < 150;
}
function scrollDistanceFromBottom(argument) {
return pageHeight() - (window.pageYOffset + self.innerHeight);
}
function pageHeight() {
return Math.max(document.body.scrollHeight, document.body.offsetHeight);
}
document.observe('dom:loaded', checkScroll);
But my endless scrolling is not working. I don't know where i am doing wrong. Please help.

Categories

Resources