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