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

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>                         

Answers:

Answer

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>

Answer

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.

Answer

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

Answer

<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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.