How to display the content of a two-dimensional array JSON Object in an HTML table

Question

I'm trying to display the content of a Javascript object into an HMTL/CSS table. The two dimensional array in Groovy looks like this (It's just a snippet, not the full one) :

[[null, Pyjamas , Oreillers Traversins, Linge de lit, Protection literie, Surmatelas, Linge de lit , Couettes, Linge de bain], [Pyjamas , null, .3333333333333333, 0.16666666666666666, 0.16, 0.16, null, null, null]]

One array corresponds to one line in my table. The Javascript object is created from a groovy controller like this

[matrix: matrix as JSON]

And here is how I think I have to get the full table in GSP/Javascript and display it (in my console, not in my table)

<script>
  var matrix = ${matrix};
  var matrixTab = JSON.stringify(matrix);
  console.log(matrixTab);
</script>

What the HMTL table looks like doesn't really matter. One more thing, I'm using firebug and when i'm trying to catch my array, the console shows me this error. Any idea ?

The code you've shown looks fine, the error you see, does it occur for the table creation or the code snippet above? — mikeapr4, Dec 15 '16 at 11:16
The table creation is not already done so it's not about that, it's about the js snippet I think. — pladislas, Dec 15 '16 at 11:23

jeanj · Accepted Answer · 2016-12-15T11:43:54.647

JSON.stringify() will output an object as a string but matrix is not a valid JavaScript object here. ${matrix} needs to be a string containing your object and then parse it like this:

var matrix = '[[null, Pyjamas , Oreillers Traversins, Linge de lit, Protection literie, Surmatelas, Linge de lit , Couettes, Linge de bain], [Pyjamas , null, .3333333333333333, 0.16666666666666666, 0.16, 0.16, null, null, null]]'
// OR
var matrix = ${matrix}
var matrixTab = JSON.parse(matrix);

You will be able to go through matrixTab and display the table as you need.

How to display the content of a two-dimensional array JSON Object in an HTML table

1 Answers1