How to get arrayList values inside a javascript to html <c: forEach>

Question

I have an arraList inside a javascript.I want to get that arrayList to iterate inside html <c:forEach>.How can I do this. I can get this arrayList to a <h:outputText> but I want to iterate the list. My javascript arraList is like this

<script>    
    topCategory = new Array();
    topCategory.push("one");
    topCategory.push("two");
    topCategory.push("threee");
    topCategory.push("four");
</script>

I need to iterate this topCategory inside a html <c:forEach>

for ex:

<script>    
topCategory = new Array();
topCategory.push("one");
topCategory.push("two");
topCategory.push("threee");
topCategory.push("four");

then this list should be iterated inside a

<table width="100%">          
  <tr>
   <td rowspan="2" width="20%">
     <c:forEach items="#{topCategory}" var="cat">
       <p:commandButton value="#{cat}"/>
              </c:forEach>   
    </td>
  </tr>

@Jaiprakash <c:forEach> is from the JSP standard tag library, used to iterate Java arrays, collections, etc. — Andreas
– Andreas, Commented Jun 23, 2016 at 6:58
@Andreas To write a <c:forEach> I need to pass that arrayList to html.I want to know how to do that.I do not want to add a <c:forEach> inside the javascript. I need to pass the topCategory arrayList ïnside html like ` <c:forEach item="topCategory " ..` — chinthi
– chinthi, Commented Jun 23, 2016 at 7:04
@chinthi may be you can use knockoutjs for iterating in html — Manoj Krishna
– Manoj Krishna, Commented Jun 23, 2016 at 7:25

coolSmart · Accepted Answer · 2016-06-28 05:52:09Z

1

I know this is a late reply . Hope this will help you. In my understand you need to iterate a array from javascript and in side the html you need to show that as button . So you can use document.createElement() and appendChild .Here is the sample ,

function getButtonSet(topCategory){
    $('#renderList').empty();
    (function(){
         var t, tt;                        
         category.forEach(renderProductList);
         function renderProductList(element, index, arr) {
            var inputElement = document.createElement("input");                                    
            inputElement.setAttribute("type", "button");
            inputElement.setAttribute("value", element);
            inputElement.setAttribute("name", element);
            var foo = document.getElementById("renderList");
            foo.appendChild(inputElement);
            t = document.createTextNode(element);
          }
     }
}

Inside you <td></td> replace the <c:forEach></c:forEach> with <div id="renderList" ></div>

answered Jun 28, 2016 at 5:52

coolSmart

6611 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

chinthi Over a year ago

thaks for the reply I tried with it and It solved the problem.

Andreas · Accepted Answer · 2016-06-23 07:02:38Z

0

Your JSP file should just have a <c:forEach> loop where you want to iterate.

<script>
topCategory = new Array();
<c:forEach var="val" items="${list}">
topCategory.push("${val}");
</c:forEach>
</script>

This will generate the JavaScript code you showed in the generated HTML, from the ArrayList provided by your Java action handler, so you end up with a JavaScript array in the browser.

Warning: This only works for simple text values, like you show. The text should be JavaScript encoded if it can contain special characters.

answered Jun 23, 2016 at 7:02

Andreas

160k13 gold badges164 silver badges262 bronze badges

4 Comments

chinthi Over a year ago

Thanks but I need iterate the topCategory outside the javascript like bellow.

<script>         topCategory = new Array();     topCategory.push("one");     topCategory.push("two");     topCategory.push("threee");     topCategory.push("four"); </script>

Andreas Over a year ago

I'm sorry, you're confusing things. <c:forEach> is a JSP JSTL tag, and runs on the server when it is building the HTML source dynamically. <script> and the code inside it, is executed by the browser on the client, after the HTML has been generated on the server. Keep clear in your mind what is executing where and when. In Java and the JSP, you can use an ArrayList. In JavaScript, you are using an Array. Totally different thing. Java != JavaScript. ArrayList != Array.

chinthi Over a year ago

Thanks I edited my question can you see it again.I need a way to do this task.

Andreas Over a year ago

As I said, keep clear in your mind what is executing where. The script code is running client-side, and it is creating a JavaScript Array, not an arraList, whatever that is. <c:forEach> and <p:commandButton> are JSP tags, which is running server-side, and cannot see the client-side array.

Community · Accepted Answer · 2017-05-23 12:33:00Z

0

If you really want to create your list and iterate on during the HTML generation server side, use: <c:set var="array" value="${["one","two"]}">

See : Creating Array using JSTL or EL

edited May 23, 2017 at 12:33

CommunityBot

11 silver badge

answered Jun 23, 2016 at 7:32

Zeldarck

871 silver badge14 bronze badges

Comments

Manoj Krishna · Accepted Answer · 2016-06-23 07:32:47Z

<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js'> </script>
<script>


function AppViewModel()
{

	topCategory = ko.observableArray([]);
    topCategory.push("one");
    topCategory.push("two");
    topCategory.push("threee");
    topCategory.push("four");
}


    
    
ko.applyBindings(AppViewModel);




</script>

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js'></script>

</head>

<body>
The content of the document......
<br>
<ul data-bind="foreach: topCategory">
    <li>
         <b data-bind="text: $data"></b>
    </li>
</ul>

you can try this

Collectives™ on Stack Overflow

How to get arrayList values inside a javascript to html <c: forEach>

4 Answers 4

1 Comment

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related