Keeping Generators in Array for variable amounts of tables in layout

Community Help
1

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.

2

If I understand correctly, you want to create an array of tables via [...].map(() => Inputs.table(...)), then apply Generators.input on each of them to create an array of generators, and then map the array of generators into value?

From my own trying, it doesn’t work if you read the generators from the array directly. I don’t know exactly why but it probably has something to do with generator needing to be read into a block to have its desired effect, instead of becoming a AsyncGenerator when you directly use it from the array of generators.

What I find works better in this case is using Inputs.form on the array of tables.

image
image1217×992 128 KB