How to Populate a Table Object with member-specific data from a query

Ask the community
, ,
1

My Challenge: On a Private Members page I need to display a table of information that’s specific to the logged-in member. For example, a history of appointments. I asked Advance Support and received this response:

I understand you would like to display content from a database collection but only allow users to see the items from the collection that are related to them. TO do this you need to add some code to your site using Velo by Wix.

To do this, create a database collection with all the fields you need, as well as a reference field connected to the PrivateMembersData collection.

On the page you want to display the data:

1. Use getMember() to get the ID of the current member.
2. Query() the collection and filter by the reference field using the ID.
3. Use the results of the query to display the data on the page.

Filtering the collection by the ID of the logged-in user will ensure they only see data linked with them.

So, I have created a Collection (“Appts”) with a Reference Field (“memberRef”).

On the Private Member Page I placed a Table object. (The available Repeaters would take far more formatting time, and I have the Table layout and design done. I may want to use a Repeater for another application, but for now I want to solve the Table challenge.)

This is where I am…

// Loading Table Object direct from query results
// This code is NOT the solution. See details in-line
import wixData from ‘wix-data’;
import wixUsers from ‘wix-users’;

const user = wixUsers.currentUser;
const memberId = user.id;

$w.onReady(function () {

try {
// Query the “Appointments” collection
let wixDataQueryAppointments = wixData.query(‘Appts’)
.eq(‘memberRef.memberId’, memberId) ← ISSUE #1
.find()
.then((results) => {
console.log("Member ID = " + memberId);
console.log("Query Row Count = " + results.totalCount);
console.log( results );

	  if ( results.totalCount > 0) {
		  $w('#appointmentsTable').show();
		  $w('#noAppointmentsMessage').hide();
		  $w('#appointmentsTable').rows = results.items;      **<-- ISSUE #2**
		  console.log("DONE LOADING RESULTS!");
	  } else {
		  $w('#noAppointmentsMessage').show();
		  console.log("Invoking hide() on #appointmentsTable");
		  $w('#appointmentsTable').hide();
		}
  }).catch((err) => {
	  console.log("EGREGIOUS ERROR!");
	  console.log(err);
  });

} catch (error) {
console.error(‘Error querying appointments:’, error);
}
});

ISSUE #1: Without this filter, I get a result set (but with all members, of course). Adding this .eq(), I get a 0-length result set. What would be the syntax for eq()'ing on the user.id?

ISSUE #2: When I remove the .eq(), I get a result set, but the table does not get populated. How do I get the results into the Table object for presentation to the user?

Thanks in advance. I’ve been stuck on this for days!

2

For posterity, Issue #1: SOLVED
This line of code had 2 errors.

First, when you add a Reference field to your Collection that joins to another Collection, you have to use the Wix-generated Field key, but I was using the “Field name”. The “Field key” is reference.

Second, reference is the Member ID. Discovered this by opening each ‘item’ in the Chrome console and seeing the values of the reference field. So, I did not have to piece together a path. This Line of Code simply became this:

.eq(‘reference’, memberId)