Question on Framework7 Picker: API Data Source allowed as Data Source? If so, how? 🤔`

[HeikoK]

I am trying to get my head around with the F7 Picker component in 5.4.3.
Following the (great!) docs here: Using Framework7 Components, I wanted to add a picker to a test app created along the docs.

The only difference, I use a public test API via API Data Source and not a SC as in the docs.

The API Call delivers data, I can fetch the schema etc.

However, after selecting the Data Source and selecting the properties, like below, the picker is empty.

(I edited also the reference for the binding from users[0].firstName to users.firstName, but no luck.)

On loading the page, the console throws an error (of course, the data is not ready yet), and when opening the picker, an error is thrown because the picker is empty:

Also, when editing the source and accidently create a parsing error (which will happen when you type in the code), the parser message is constantly thrown until you fix the line or delete it:

[George]

What exactly is your data source structure here?

Usually you pick the repeating element as Data Source and then the property names for value and display in this case.

[HeikoK]

Perhaps the standard newbie error…

Setting up the API Source, fetching the schema:

Selecting data as data source for the picker in the bindings picker (tried also users directly, but no luck)

…and selecting the field from the binding for the property:

The array index surprises me, I wouldn’t expect the code to refer to the first element of the array ([0]) every time, but removing the index doesn’t help.

As it seems to work perfectly for Teodor in his tutorial, I am pretty sure I doing something simple wrong🙈

/heiko

[Teodor]

You need to select the users array as a data source.

[HeikoK]

Yes! I told ya, it’s stupid: I changed of course to users, but did not assign the properties again. So it never matched!