Passing list of lists from elixir to JS array of arrays

Questions / Help
1

Hello,

Let’s assume the following code on server side:

data = [
    [10, 20, 50, 20],
    [10, 20, 0, 70],
    [10, 25, 50, 15],
    [10, 20, 50, 20],
    [70, 20, 5, 5],
    [10, 20, 50, 20],
    [70, 20, 5, 5],
    [10, 20, 50, 20],
    [70, 20, 5, 5],
    [10, 20, 50, 20],
  ]
{:ok, push_event(socket, "data", %{data: data})}

I can’t figure out a way to decode it into an array of arrays on client side.
I’ve tried the following

  1. Using directly
this.handleEvent("data", (data) => console.log(data))
// $ [object Object]
  1. Using destructuring assignment
this.handleEvent("data", ({data}) => console.log(data))
// $ [10, 20, 50, 20, 10, 20, 0, 70, 10, 25, 50, 15, 10, 20, 50, 20, 70, 20, 5, 5, ...]
  1. Using JSON.stringify
this.handleEvent("data", (data) => console.log(JSON.stringify(data)))
// $ "[[10, 20, 50, 20], [10, 20, 0, 70], [10, 25, 50, 15], [10, 20, 50, 20], [70, 20, 5, 5], ...]"

The third one actually produces the desired structure but converts it into a string.

Before trying to evaluate the string (which feels completely wrong at this point), can someone point me into the right way of passing this kind of data to JS to get a usable array of arrays?

Thank you!

2

If JSON.stringify is showing it as an array of arrays, are you sure you can’t just use it as such in the JS? I realize console.log(data) isn’t showing you the result you expect, but have you tried iterating over it?

3

An array should have a length property. In this case, trying to access it through data.length throws an error.

I am guessing because it is not actually an Array. But, what is it then?

4

Indeed it was iteration that helped me solve this. List of lists is passes as a map with indices being keys.
Therefore, this little helper function solves everything:

function parse_ex_matrix(ex_list_data)
{
    let matrix = [];
    for (const prop in ex_list_data) {
        if (ex_list_data.hasOwnProperty(prop))
        {
            let row = Array.from(ex_list_data[prop]);
            matrix.push(row);
        }
    }
    return matrix;
}