Iterate over a list from backing bean in JavaScript

Question

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?

Karolyn

I am not a java expert, but I guess # things are meant to be executed on the server side, while your loop and its i variable is on the client. – Phenobarbital

el can be executed in JS with no problems, the issue is with the loop variable. – Karolyn

Answer 1

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

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

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 (assuming that you're using Gson):

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

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

Diuretic

console.log(#{bean.property}); just appears as console.log() when I debug javaScript, the same thing with ui:repeat, or c:foreach, it shows var users = [ ]. It's not populating the variables. – Womanize

This is not caused by beans being called in a piece of text in a Facelet which happens to represent JavaScript code. – Diuretic

I don't understand, is that a question? I'm calling it inside a <ui:define name="javascript"> <script type="text/javascript"> inside a .JSP page, yes. – Womanize

You're using Facelets tags in a JSP page? You've definitely a different problem not related to the question currently asked. – Diuretic

Yes, but there are other working richFaces components in this page like <rich:toolBarGroup and <a4j:poll. I even tried with <a4j:repeat but the same thing is happening. – Womanize

Answer 2

I faced the same error and I resolved it by using "<" instead of < in for loop

Barham