在JavaScript中迭代来自支持bean的列表 [英] Iterate over a list from backing bean in JavaScript

问题描述

我有一个支持bean
的对象列表，我想在JavaScript中迭代它，
所以我尝试了以下内容：

I have a list of objects in backing bean and I would like to iterate over it in JavaScript, so I tried the following:

<script>
    //<![CDATA[
    var length = #{fn:length(myBean.myList)};

    for (i = 0; i <= length; i++) {
        var value = '#{myBean.myList[i].id}';
        var label = '#{myBean.myList[i].firstName}';
        alert(value);
        alert(label);
    }
    //]]>
</script>

我在控制台中没有错误，但它显示空警报。这是怎么回事？如何解决？

I get no errors in console, but it shows empty alerts. How is this caused and how can I solve it?

推荐答案

首先需要将它转换为JS对象数组。如果 id 是数字，这里的方法如下：

You need to convert it to an array of JS objects first. Provided that id is numeric, here's how:

var users = [
  <ui:repeat value="#{bean.users}" var="user" varStatus="loop">
    { id: #{user.id}, firstName: "#{user.firstName}" }#{loop.last ? '' : ','}
  </ui:repeat>
];

for (var i = 0; i < users.length; i++) {
    var user = users[i];
    alert(user.id);
    alert(user.firstName);
}

只有当用户名包含换行符时才会失败（双引号已经是被JSF逃脱）。考虑根据在表达式语言中逃避JavaScript 显式转义JS

This will only fail if the user name contains a newline (double quotes are already escaped by JSF). Consider explicitly escaping JS as per Escape JavaScript in Expression Language

更好的方法是让JSF（或者最好是一些web服务，例如JAX-RS，根据ajax请求）在 JSON 格式已经使用JSON解析器/格式化程序，如 Google Gson ，所以你可以这样做：

Better way is to let JSF (or preferably, some web service, e.g. JAX-RS, upon an ajax request) return it in JSON format already by using a JSON parser/formatter like Google Gson, so that you can just do:

var users = #{bean.usersAsJson};

for (var i = 0; i < users.length; i++) {
    var user = users[i];
    alert(user.id);
    alert(user.firstName);
}

with（假设您正在使用Gson）：

with (assuming that you're using Gson):

public String getUsersAsJson() {
    return new Gson().toJson(users);
}

请注意，您应该使用 i<长度不是 i< = length 。另请注意，用户比 myList 更自我记录。

Please also note that you should use i < length not i <= length. Please also note that users is more self-documenting than myList.

这篇关于在JavaScript中迭代来自支持bean的列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！