output navigation object as a JSON

[doughnut1218411]

Hi!

I'm looking for a way to combine liquid & react/preact to create a store front.

I believe that we could send & catch objects as JSON so that we could use that data in a react jsx file like this:

//section liquid file
<script id="inline-json-product" type="application/json">
  {{ product | json }}
</script>

and then, in a jsx file, we could parse this object like this:

//jsx file
const products = JSON.parse(document.getElementById("json-product").text)

this works fine with product object, however, links navigation objects cannot be output as json data.

so what I tried was to use a map filter like this:

<script id="json-category" type="application/json">
  {% assign links = linklists.category-menu.links | map: 'object' %}
  {{ links | json }}
</script>

in this way, I could only output the first layer links, and could not child/grandchild layer navigation objects. (the navigation has a multiple layers).

Does anybody has an idea?

I could use NextJS or even hydrogen, but let's put it aside for now.

Thank you.