Question

我在javascript内部有一个arraList。我想让arrayList在html <c:forEach>内进行迭代。我该怎么办呢。我可以将此arrayList转换为<h:outputText>，但我想迭代列表。我的javascript arraList就像这样

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

我需要在topCategory html

内迭代此<c:forEach>

代表：

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

然后这个列表应该在

中迭代

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

Answer 1

我知道这是一个迟到的回复。希望这会帮助你。根据我的理解，你需要从javascript迭代一个数组，并在html中你需要将它显示为按钮。因此，您可以使用document.createElement()和appendChild。这是示例，

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);
          }
     }
}

在你<td></td>内，用<c:forEach></c:forEach>

替换<div id="renderList" ></div>

Answer 2

您的 JSP 文件应该只有一个<c:forEach>循环来迭代。

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

这将生成您在生成的HTML中显示的JavaScript代码，来自 Java 操作处理程序提供的ArrayList，因此您最终得到了 JavaScript数组在浏览器中。

警告：这仅适用于您显示的简单文字值。如果文本可以包含特殊字符，则应该使用JavaScript编码。

Answer 3

如果您确实想要在HTML生成服务器端创建列表并进行迭代，请使用： <c:set var="array" value="${["one","two"]}">

请参阅：Creating Array using JSTL or EL

Answer 4

＆＃13;

<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>

＆＃13;

<!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>

＆＃13;

你可以试试这个

如何将javascript中的arrayList值转换为html <c：foreach =“”>

4 个答案: