如何将JSF中的对象列表传递给javascript函数[重复]答案

【问题标题】：How to pass a list of objects in JSF to a javascript function [duplicate]如何将JSF中的对象列表传递给javascript函数[重复]
【发布时间】：2020-05-25 14:27:06
【问题描述】：

我想将 jsf 文件中的对象列表（示例中为 list_A）传递给 javascript 中的函数。问题是调用 event.name="#{controllerManagedBean.list_A.get(y).getName()}";为 event.name 分配值，就好像“y”始终具有值 0，即列表中的第一项。

如何浏览列表并将所有名称传递给 list_1（如果可能，不使用 json）？

谢谢！！

这是我的代码（我认为重要的是脚本）：

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <script src="visJS/dist/vis.js"></script>
        <link href="visJS/dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
    </h:head>
    <h:body>
        <h:form>
            <h:dataTable value="#{controllerManagedBean.list_A}"
            var="evento" border="2"
            cellspacing="1" cellpadding="1">
                <h:column>
                    <f:facet name="header">Evento</f:facet>
                    #{evento.nombre}
                </h:column>
            </h:dataTable>
        </h:form>
        <div id="timeline">Prueba</div>

        <script src="js/timeline.js"></script>
        <script>
          var x = parseInt('#{controllerManagedBean.list_A.size()}');
          var list_1 = new Array();

          //<![CDATA[
              for(var y = 0; y<x; y++){
          //]]>
                  var evento = new Object();
                      evento.nombre = "#{controllerManagedBean.list_A.get(y).getNombre()}";
                      list_1.push(evento);
              }
          myFunction(list_1);
        </script>

    </h:body>
</html>

【问题讨论】：

请参阅this 问题。您必须在 jsf 中将其转换为字符串，然后在 js 中将其转换回来。所以使用json、xml或者自定义转换是唯一的可能
@fuggerjaki61：不，你没有。一个 ui:repeat 可以作为您提到的链接并没有说转换和转换回来（请参阅stackoverflow.com/questions/2547814）。问题是没有将事物作为字符串传递（周围有单引号）。在这种情况下，OP thinking/假设 "#{controllerManagedBean.list_A.get(y).getNombre()}" 在循环中每次都被评估，但它不是。它被评估一次。 OP 可以使用 ui:repeat 使用 EL 和 javascript 轻松构建所需的列表，如本评论中的链接所示，然后遍历该列表。
这能回答你的问题吗？ Mixing JSF EL in a JavaScript file
@pgsanchez 向您展示更多问题：循环for(var y = 0; 在浏览器中执行。所有像#{controllerManagedBean.list_A.get(y) 这样的EL 表达式都在服务器端在页面被传递到浏览器之前执行。你看，这个EL中的y不能有合法的价值。
我知道，@djmj。正如你所说，在我的代码中，变量名更有意义，但用的是西班牙语。所以我虽然在这里将列表命名为 list_1 而不是 listaRepostajes 可能更容易。不过谢谢你的建议！

标签： javascript jsf arraylist

【解决方案1】：

正如@fuggerjaki61 所说，我终于通过 JSON 解决了这个问题

@Kukeltje 使用 ui: repeat 的解决方案对我不起作用，因为 ui: repeat 不能放在脚本块内。不过非常感谢！

我的解决方案是：在服务器部分（它是一个 Web 应用程序）中，我放置了一个函数，该函数通过列表 list_A 并生成包含所有数据的 JSON 格式字符串。

private String listInJSON;
public void convertToJson()
{
    Gson gson = new Gson();
    listInJSON = "";
    listInJSON += "[";
    for(MyObject obj: list_A){
        listInJSON += gson.toJson(obj);
        listInJSON += ",";
    }
    listInJSON += "]";
    listInJSON = listInJSON.replace("},]", "}]");
}

这会生成一个 JSON 格式的字符串：[{...},{...},...{...}] 例如就我而言：[{"name":"Prueba","date":"Sep 10, 1999 12:00:00 AM"}, ...]

在我的 index.html 中，我调用了一个 javascript 函数 procesarJSON：

onclick="procesarJSON('#{controllerManagedBean.listInJSON}')"

最后，在我的 javascript 文件中：

function procesarJSON(jsonCompleto){
    var obj = JSON.parse(jsonCompleto); 

    for (var i = 0; i < obj.length; i++)
    {
        console.log('name = ' + obj[i].name); // prints: Prueba
        // Remember the JSON: [{"name":"Prueba","date":"Sep 10, 1999 12:00:00 AM"}, ...]
        // To process the rest of the data here. 
    }

}

谢谢大家！！

【讨论】：

哦，为什么不直接从列表中创建 json：stackoverflow.com/questions/14228912/…

【解决方案2】：

您可以按照@pgsanchez 在他的回答中提出的建议使用 json，但在您的情况下，您有一个简单的数据结构，您可以更轻松地创建一个 javascript 数组，如下所示：

<script>

    // fill javascript array with bean integer values using string joining
    var jsEventNumbers: [#{bean.events.stream().map(e -> e.number).reduce((p1, p2) -> p1 += ', ' += p2).get()}];

    myFunction(jsEventNumbers);

</script>

json 方法虽然更灵活。你也可以看这里：

【讨论】：