5

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?

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
Sameh Farahat
  • 1,703
  • 8
  • 22
  • 26
  • 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. – georg Dec 27 '11 at 11:56
  • el can be executed in JS with no problems, the issue is with the loop variable. – Sameh Farahat Dec 27 '11 at 12:19

2 Answers2

12

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.

Community
  • 1
  • 1
BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • 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. – StudioWorks Apr 01 '16 at 12:40
  • This is not caused by beans being called in a piece of text in a Facelet which happens to represent JavaScript code. – BalusC Apr 01 '16 at 12:44
  • I don't understand, is that a question? I'm calling it inside a – StudioWorks Apr 01 '16 at 13:43
  • You're using Facelets tags in a JSP page? You've definitely a different problem not related to the question currently asked. – BalusC Apr 01 '16 at 13:45
  • Yes, but there are other working richFaces components in this page like – StudioWorks Apr 01 '16 at 14:02
0

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

Madhura
  • 551
  • 5
  • 18