Keeping Generators in Array for variable amounts of tables in layout

Hello,

I can’t figure out something with the observable framework. I have a list of values and a variable amount of levels. I want that an user is able to choose one value from the list per level. These choices I want to use later. Since tables have the option to choose rows, I wanted to use them with generators in an array to make the amount of levels variable.

const attributes = values.map(d => ({Att: d}))
const tables = new Array(numlevels).fill(Inputs.input(Inputs.table(attributes, {multiple: false, required: true})))
const gens = tables.map(d => Generators.input(d))
<div class="grid grid-cols-2"> 
${tables.map((d, index) => htl.html`
      <div>
        <h3>${index+1}. attribute</h3>
        ${Inputs.bind(Inputs.table(attributes, {multiple: false, required: true}), d)}
      </div>
      `)
}

</div>

This does not work. If I’m trying to read from one of the gens, e.g. like this

display(gens[0])

It is always the AsyncGenerator object instead of an Object with the chosen Att value. I’ve tried this with a fixed amount of levels, the gens and tables being explicitly saved in a variable instead in some position of an array and it worked out that way. In the shown version, I guess there is some issue with something being a copy instead of the actual object, but I’m not sure.

I hope someone can help me. Thanks.

PS: If you have some tips on extending the amount of columns based on the amount of levels, I would appreciate it.