如何将javascript中的arrayList值获取到html <c：forEach>答案

【问题标题】：How to get arrayList values inside a javascript to html <c: forEach>如何将javascript中的arrayList值获取到html <c：forEach>
【发布时间】：2016-10-25 08:29:19
【问题描述】：

我在 javascript 中有一个 arraList。我想让该 arrayList 在 html <c:forEach> 中进行迭代。我该怎么做。我可以将此 arrayList 获取到 <h:outputText> 但我想迭代列表。我的javascriptarraList 是这样的

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

我需要在 html <c:forEach> 中迭代这个 topCategory

例如：

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

【问题讨论】：

这和java有什么关系？
如果你想要<c:forEach>，写一个。
@Jaiprakash <c:forEach>来自JSP标准标签库，用于迭代Java数组、集合等
@Andreas 要编写<c:forEach>，我需要将该arrayList 传递给html。我想知道该怎么做。我不想在javascript 中添加<c:forEach>。我需要传递 topCategory arrayList ïnside html 像`
@chinthi 可能你可以使用 knockoutjs 在 html 中进行迭代

标签： javascript java arraylist

【解决方案1】：

我知道这是一个迟到的回复。希望这会帮助你。据我了解，您需要从 javascript 迭代一个数组，并在 html 中将其显示为 button 。所以你可以使用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>

【讨论】：

感谢我尝试过的回复，它解决了问题。

【解决方案2】：

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

你可以试试这个

【讨论】：

【解决方案3】：

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

见：Creating Array using JSTL or EL

【讨论】：

【解决方案4】：

您的 JSP 文件应该只有一个 <c:forEach> 循环，您要在其中进行迭代。

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

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

警告：这仅适用于简单的文本值，就像你展示的那样。如果文本可以包含特殊字符，则应使用 JavaScript 编码。

【讨论】：

谢谢，但我需要像下面这样在 javascript 之外迭代 topCategory。<script> topCategory = new Array(); topCategory.push("one"); topCategory.push("two"); topCategory.push("threee"); topCategory.push("four"); </script>
对不起，你把事情弄糊涂了。 <c:forEach> 是一个 JSP JSTL 标签，在动态构建 HTML 源代码时运行在 server 上。 <script> 和其中的代码在服务器上生成 HTML 之后，由 客户端上的浏览器执行。清楚地记住什么在何时何地执行。在 Java 和 JSP 中，您可以使用ArrayList。在 JavaScript 中，您使用的是 Array。完全不同的东西。 Java！= JavaScript。 ArrayList != 数组。
谢谢我编辑了我的问题你能再看看吗？我需要一种方法来完成这项任务。
正如我所说，请记住在哪里执行什么。脚本代码正在运行 client-side，它正在创建一个 JavaScript Array，而不是一个 arraList，不管它是什么。 <c:forEach>和<p:commandButton>是JSP标签，运行在server-side，看不到client-side数组。跨度>