1 user input -> export multiple datasets to tables

Discussion Ask a question
,
1

I want the user to be able to select the student name from a drop-down menu. Then create several tables about that student (from different collections). E.g. User selects “John”, then an attendance table, grade table, and student information table appear.

I have successfully created one table from the dropdown using javascript, but I don’t know how to create more because I can only link 1 dataset to the drop-down user input.

Thanks in advance.

2

Hello Mathew
here’s some hints of how u can do that

  • add on change event for the drop down and then do the following
export async function dropdown1_change(event) {
//add code here
}
  • get the dropdown value
let student= $w("dropdown1").value; // "42"
  • query the data base based of this value (student name)
let results = await  wixData.query("myCollection")
  .eq("student-name-field",student).find()
let tableData-results.items
  • from the query result set the tables data based of the table items format as follows
// get the values from tableData.feildKey
const myTableData = [
  {"name": "A", "num": 45},
  {"name": "B", "num": 34},
  {"name": "C", "num": 19},
  {"name": "D", "num": 59},
  {"name": "E", "num": 24},
  {"name": "F", "num": 96}
];

// ...

$w("#myTable").rows = myTableData;
  • then set the table rows to the table array u created using code. the table shouldn’t be connected to the data set.

Best Of luck
Massa

2 Likes
3

Thanks for the help. I’m highly inexperienced.

  1. I have an error @:
    let tableData-results.items
    “Parsing error: unexpected token-”

export async function dropdown1_change(event) {
let student= $w(“dropdown1”).value; // “42”
let results = await wixData.query(“StudentInformation”)
.eq(“student_id”,student).find()
let tableData-results.items
const myTableData = [
{“name”: “A”, “num”: 45},
{“name”: “B”, “num”: 34},
{“name”: “C”, “num”: 19},
{“name”: “D”, “num”: 59},
{“name”: “E”, “num”: 24},
{“name”: “F”, “num”: 96}
];

  1. I don’t know how to fill in the last section ({“name”: “A”, “num”: 45}). Can you give me an example?

  2. How do I query the different collections and direct them at different tables?

Sorry I couldn’t get it right from the hints! Thanks again for your time.

4

Hello
1) it should be written this way: let tableData = results.items
2) you fill this section based on your table fields and you data fields. so lets say you have two columns, one with field studentName and one with field key number. and in the database you have a field studentName and a field number, the data would look as follows:

const myTableData = [
{"studentName ": tableData.studentName , "number":tableData.number }
];
$w("#myTable").rows = myTableData;

note that this step is not always needed, you can simply skip it if the table keys are the same as the data set’s.

$w("#myTable").rows = results.items;
  1. you can query each collection with its own query, and get a results array of each, lets say:
 let results1 = await  wixData.query("myCollection1") .eq("student-name-field",student).find() 
 let results2 = await  wixData.query("myCollection2") .eq("student-name-field",student).find()

and then you create the data for each table based on which results has it.

I checked your editor, I assumed the page you’re asking about is “New Page”:

  • you can’t have two onReady functions, set both tables columns in the first (and should be only) onReady.
  • on drop down value change function works correctly, it should be looking like this:
export async function dropdown1_change(event) {
 let res = await wixData.query("StudentInformation")
        .contains("student_id", $w("#dropdown1").value)
        .find() // Run the query
 // Set the table data to be the results of the query
    $w("#table1").rows = res.items;
    $w("#table1").expand();

}
  • in order to show the second table you need a button click event and inside of it you query the collection (attendance) based of the referenced field is :
export async function button1_click(event) {
 //to get the referenced field id 
 let studentId= $w('#table1').rows[0]._id 
 let res = await wixData.query("Attendance")
        .hasSome("student_id", studentId)
        .find() // Run the query
 // Set the table data to be the results of the query
    $w("#Attendance").rows = res.items;
    $w("#Attendance").expand();

}

I hope it works for u !

Massa

1 Like