How can I output navigation object as JSON for a storefront?

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

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:


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.