How to get arrayList values inside a javascript to html

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 `` is from the *JSP* standard tag library, used to iterate *Java* arrays, collections, etc. — Andreas, Jun 23 '16 at 06:58
@Andreas To write a `` I need to pass that arrayList to `html`.I want to know how to do that.I do not want to add a `` inside the javascript. I need to pass the topCategory arrayList ïnside `html` like ` — chinthi, Jun 23 '16 at 07:04
@chinthi may be you can use knockoutjs for iterating in html — Richard Elite, Jun 23 '16 at 07:25
@ManojKrishna can you tell me how to do it or link of a tutorial or example for that — chinthi, Jun 23 '16 at 07:26

score 1 · Accepted Answer · answered Jun 28 '16 at 05:52

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>

thaks for the reply I tried with it and It solved the problem. — chinthi, Jun 28 '16 at 06:02

score 0 · Answer 2 · answered Jun 23 '16 at 07:02

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 '16 at 07:02

Andreas

154,647
11
152
247

Thanks but I need iterate the topCategory outside the javascript like bellow.` ` – chinthi Jun 23 '16 at 07:08
1

I'm sorry, you're confusing things. `` is a JSP JSTL tag, and runs on the *server* when it is building the HTML source dynamically. ` – Andreas Jun 23 '16 at 07:11
Thanks I edited my question can you see it again.I need a way to do this task. – chinthi Jun 23 '16 at 07:25
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. `` and `` are *JSP tags*, which is running **server-side**, and *cannot see the client-side array*. – Andreas Jun 23 '16 at 15:25

score 0 · Answer 3 · edited May 23 '17 at 12:33

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 '17 at 12:33

Community

1
1

answered Jun 23 '16 at 07:32

Zeldarck

89
1
13

score 0 · Answer 4 · answered Jun 23 '16 at 07:32

<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

How to get arrayList values inside a javascript to html

4 Answers4