How to pass a variable being an array in JavaScrip

Question

The setup:

Using Play! framework v 2.0.4

The controller:

  def javascriptRoutes = Action { implicit request =>
    Ok(
      Routes.javascriptRouter("jsRoutes")(
        routes.javascript.Admin.approve  
      )
    ).as("text/javascript")
  }

def approve(user: List[String]) = SecureAction('admin) { implicit ctx =>
    Logger.debug("Admin.approve: " + user.foldLeft("")(_ + "::" + _))
    user map { u =>
      User.approve(u)
    }
    Ok(Json.toJson(user))
  }

The view:

  function get_selected() {
      return  $.makeArray($(".user-selector").map(function (ind, user){
          if(user.checked) return user.name;
      }));
  }

 $("#button-approve").click(function(){
      jsRoutes.controllers.Admin.approve(get_selected()).ajax({
          success: function(data, status) {
              console.log("Users activated: " + data)
              for(i = 0; i < data.length; i++) {
                  id = "#" + data[i];
                  $(id + " > td > i.approved").removeClass("icon-flag").addClass("icon-check");
              }
              $(":checked").attr("checked", false);
          }
      });
  });

The routes:

PUT     /admin/users                controllers.Admin.approve(user: List[String])
GET     /admin/jsRoutes             controllers.Admin.javascriptRoutes

I also used the code mentioned in this question to allow binding of List[String] as a parameter.

The problem

The parameters are passed in a request reported like this:

PUT /admin/users?user=506b5d70e4b00eb6adcb26a7%2C506b6271e4b00eb6adcb26a8

The encoded %2C character being a comma. The controller interprets it as a single string because the debug line from the code above looks like this:

[debug] application - Admin.approve: ::506b5d70e4b00eb6adcb26a7,506b6271e4b00eb6adcb26a8

(using the default List.toString was misleading that's why I used the foldLeft trick).

So

How to pass the list of checkbox selected users to the controller so it is interpretted as a list of strings, and not list of single string?

Answer 1

Ok. The problem was in the old implementation of QueryBinders that were missing the JavaScript part. The proper version is:

package models

import play.api.mvc.{JavascriptLitteral, QueryStringBindable}


//TODO: remove when updating to 2.1                                                                                                                                                                                

object QueryBinders {

  /**                                                                                                                                                                                                              
   * QueryString binder for List                                                                                                                                                                                   
   */
  implicit def bindableList[T: QueryStringBindable] = new QueryStringBindable[List[T]] {
    def bind(key: String, params: Map[String, Seq[String]]) = Some(Right(bindList[T](key, params)))
    def unbind(key: String, values: List[T]) = unbindList(key, values)

    /////////////// The missing part here...:
    override def javascriptUnbind = javascriptUnbindList(implicitly[QueryStringBindable[T]].javascriptUnbind)
  }

  private def bindList[T: QueryStringBindable](key: String, params: Map[String, Seq[String]]): List[T] = {
    for {
      values <- params.get(key).toList
      rawValue <- values
      bound <- implicitly[QueryStringBindable[T]].bind(key, Map(key -> Seq(rawValue)))
      value <- bound.right.toOption
    } yield value
  }

  private def unbindList[T: QueryStringBindable](key: String, values: Iterable[T]): String = {
    (for (value <- values) yield {
      implicitly[QueryStringBindable[T]].unbind(key, value)
    }).mkString("&")
  }

  /////////// ...and here
  private def javascriptUnbindList(jsUnbindT: String) = "function(k,vs){var l=vs&&vs.length,r=[],i=0;for(;i<l;i++){r[i]=(" + jsUnbindT + ")(k,vs[i])}return r.join('&')}"

  /**                                                                                                                                                                                                              
   * Convert a Scala List[T] to Javascript array                                                                                                                                                                   
   */
  implicit def litteralOption[T](implicit jsl: JavascriptLitteral[T]) = new JavascriptLitteral[List[T]] {
    def to(value: List[T]) = "[" + value.map { v => jsl.to(v)+"," } +"]"
  }

}

Now the query looks like this:

PUT /admin/users?user=506b5d70e4b00eb6adcb26a7&user=506b6271e4b00eb6adcb26a8

And finally everything works.

Final note:

In the Play! framework 2.1+ it should work without adding the code in the project sources. Actually the code is borrowed as-is from Play20/framework/src/play/src/main/scala/play/api/mvc/Binders.scala