Grails Sending parameter from g:each to javascript

What I need to do is show more information than the table size allow me to show. For that, I'm opening a jQuery Dialog with the whole information when the user mouse over the row he needs to see.

The problem I have is when I pass the parameter from the row to the javascript function. I can't get it to be used like a JSON object

From the controller, I'm sending an ArrayList to the view (gsp) g:each.

def detailList = [[key11:val11, key12,val12],[key21:val21, key22:val22]] //...etc
render (model:[detailList:detailList], view:'show')

In the view, I call a javascript function to open the dialog, and with that I'm sending the "looping" object "${detail}"

<g:each in="${detailList}" status="i" var="detail">
    <tr class="${(i % 2) == 0 ? 'even' : 'odd'}" onmouseover='openDialog("${detail}")' onmouseout='closeDialog()' >
        <td>${detail.code}</td>                     
        <td>${detail.name}</td>
    </tr>
</g:each>

But what I recieve in the javascript function is this:

{key11=val11, key12=val12}

And what javascript needs to successfuly JSON.parse() is this:

{"key11"="val11", "key12"="val12"}

I can't fix this "JSON" with regex, or splits() or any of that because one of the parameter is a descripción in wich I could recieve any kind o characters.

Is there any other way to recieve the object in javascript and use it like: alert(detail.code)?

I know I can send the parameters one by one like this:

onmouseover='openDialog("${detail.code}", "${detail.name}")'

But that's not the Idea, right? besides, there are a Lot of parameters.

Any idea would really help. Thanks.

Solution

You could encode your data as JSON within the controller like this:

render (model:[detailList:detailList as JSON], view:'show')

In the view you could assign the JSON to any JavaScript variable:

<script>
    var myJsDetailList = ${raw(detailList)};
</script>

If you don't want to pass JSON from controller to view you could encode the data within your GSP using encodeAsJSON():

<g:each in="${detailList}" status="i" var="detail">
   <tr class="${(i % 2) == 0 ? 'even' : 'odd'}" onmouseover='openDialog("${detail.encodeAsJSON()}")' onmouseout='closeDialog()' >
      <td>${detail.code}</td>                     
      <td>${detail.name}</td>
   </tr>
</g:each>