Hi Alex:
OK here’s a little theory and practise :-).
You can always create multiple tables from one table or one table from multiple tables using a variety of techniques. I’ll walk through one here and then I’ll let you extrapolate if you want to.
Variables
So first of all let’s talk about javascript variables. A variable in Javascript is basically named memory and can hold a variety of things from primitives like numbers and booleans to more complex things like functions, strings and objects. For this discussion we will think about an array and an object.
Object
Objects, in simple terms, are a collection of key, value pairs. Think of the key as the name of some thing and the value is what that name refers to. Some javascript references will use the term name value pair also. The value can be data like a number or a string, or it can be another object or a function. So the phrase “my name is Steve” essentially establishes a key value pair key=‘name’ value ‘Steve’.
An object is defined in a variety of ways but the simple way is to use literal notation, open curly brace { to start the object definition and close curly brace } to end the definition. Key value pairs are then added to the object using a colon : to separate key from value and a comma , to separate each key/value pair definition. So we can define a member object like so:
let member = { name:"Steve" };
Property
Simply put a property is a key/value pair. The property name is the key name the property value is the value. So in the above example the name property of member is
name:"Steve"
Array
Simply put an array is a list of variables. Arrays do not have a name context for each variable they hold so arrays are expected to hold collections of the same type of variable.
An array can be defined in a number of ways but the simplest way is to use literal notation. Open square bracket [ starts the array definition and closed square bracket ] ends the definition. Between the brackets you simply list out the values using primitives or variables. So if I have several members I can define a variable that holds a collection of member objects like this
let members = [ {name:"Steve"}, {name:"Peter"}, {name:"Robert"} ];
Data Collection
Data Collections have a schema which defines the different types of data the collection can hold. In Wix each column has two names one is the display name that you see in the Editor or dashboard view the other is the property name when used in code. These can be the same but often are not. If we were to consider a member collection then we would possibly have Name as our display name and name as our property name.
column name === property name === key
column value === property value === value
When dealing with data collections (databases) data is generally described in terms of rows and columns (like a spreadsheet).
-
Each column contains the values of the property for a given column name.
-
Each row defines an item in the collection.
-
Each item is made up of properties
So if we want to represent the members we have in a data collection then it will look like this
Name
"Steve"
"Peter"
"Robert"
wix-data API
When you make a call to the wix data api to access data from the data collection (or indeed using the dataset) the results are returned as either a single object (wix-data.get) or as an array of items (wix-data.find query result). These results are straight forward to connect:
collection row === item === object
collection column === property === key/value pair
multiple collection rows === multiple items === array of objects
Working with Objects
Once you have an array of objects you can start to manipulate them and use them in a variety of ways. Let’s assume we have a members collection that looks like this
Name Role
"Steve" "Cook"
"Peter" "Waiter"
"Robert" "Bar person"
When retrieved from the data collection we would have an array of objects like this:
let members = [
{name:"Steve", role:"Cook"},
{name:"Peter", role:"Waiter"},
{name:"Robert", role:"Bar person"} ];
For our drop down element we need to pick the column from the data collection that we want to use as our options. Well All we need to do is create an array containing the option objects that the DropDown expects to see. An option is a simple object with two properties a label property and a value property. The label property has the key label and the value has the key value so an option object look like this:
let option = {label:"label name", value:"value"};
So to create a dropdown option list containing member roles we need to do the following:
-
Create an empty dropdown options array
-
For each member object
-
Load the member role property
-
Create an option object where the label value is set to the role value and the value value is also set to the role value
-
Add the new option object to the options array
Create an empty dropdown options array
This is simple
let options = [];
For each member object
Now if you start to use javascript then you need to get familiar with looking up the APIs for the data or services that you want to use. Now we know that our members are objects in an array so how do we figure out how to look at each object in the array? Well you need to look at the javascript array API or find a tutorial. The Mozilla Developer network (MDN) is referenced a lot in the Wix Code API docs. I often point to w3schools as a learning aid they deal with arrays here. If you go here and search for Array you will find this page. Once you have a sense of what you can do with an array you will find the forEach() function. We use this with our members array to work on each object it contains.
Closure function
Now forEach (as with many functions like this) a closure is required. Closures can be a complex topic so to simplify a closure is simply a function that gives you control over data that the function you are using gives you access to.
So how does forEach use it’s closure function? Well it simply executes a javascript for loop that reads the next object in the array and calls the closure function giving it the object. When the closure function is finished it gets the next object and calls the closure again.
for (let i = 0 ; i < array.length; i++) {
closure(array[i]);
}
Closures can be either an anonymous function (it doesn’t have a name) or a named function. Let’s use an anonymous function because that way we can access the variables we need from the calling function. The anonymous function will perform steps 3, 4 and 5.
Anonymous functions use the following syntax
(arguments) => {
}
OR
function(arguments) {
}
essentially think of function() as being the same as () =>
Load the member role property
We access the property value of an object by simply adding the key name to the variable that contains the object. So if we have a member object called member and we want the value for the role from that object we simply do this
let role = member.role;
Create an option object where the label value is set to the role value and the value value is also set to the role value
Now that we have the role value we need to create our option object using the key/value pairs we discussed above.
let option = {label:role, value:role};
Add the new option object to the options array
Here we need to go to our Array API and find out how to add something to an Array. Again there are several ways we can do this but the easiest is to use the push() function. This simply adds a new item to an existing array like this:
options.push(option);
Once we have the options array we can then tell the dropdown what it is supposed to be displaying:
dropdown.options = options;
Finished Example
So here is the example code for what we have just walked through. Essentially we retrieve all member records from a data collection that we will call Members.
We read all of the member roles from the member list we get as our result.
For each member record we have we create an option object that we add to a new array for the dropdown.
We assign the options array to the drop down
wixData.query("Members").find()
.then((results) => { // Anonymous closure ;-)
let members = results.items; // An array
let options = []; // Empty options array
members.forEach((member) => { // Anonymous closure ;-)
let role = member.role;
if (role) {
let option = {label:role, value:role };
options.push(option);
}
});
$w('#dropdown1').options = options;
});
Hopefully this helps those folks who are new to javascript and provides some context to getting a solution. My aim is to teach how to fish not give out free fish 
Let me know if this helps or could be done in a better way!
Cheers
Steve