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.