Hi,
I have successfully been able to create a repeating layout with all of the users on my site listed on it, along with a “follow” button for users to click and perform a “follow” function. However, although I have the mechanics of this correct, I am struggling with how to display this data on the repeater. I want the number of followers that a certain user has next to the follow button. See the example below:
The number next to the follow button shows how many users are following someone. How can this be done?
EX: I click on “follow”, the number increases by 1 on the person that I followed
Here is the code that I used:
import wixUsers from “wix-users”;
import wixData from “wix-data”;
// the onClick handler for the button in the repeated item
export function button29_click(event, $w) {
// let's get the userId of the current logged in user
const followerId = wixUsers.currentUser.id;
console.log("followerId: ", followerId);
// let's get the userId from the repeated item
// where the button was clicked
// (replace "#myMembersDataset" with the name of your dataset
const followeeId = $w("#dataset2").getCurrentItem()._owner;
console.log("followeeId: ", followeeId);
// save them to our "Followings" collection
// using the wixData API
wixData.insert("Followers_Followees", {
"followee": followeeId,
"follower": followerId
}) .catch((err) => {
// to help you debug if something went wrong
console.log(err);
});
}
Here is a link to my homepage: https://www.pawtalog.com/
Here is a link to the page with the repeater and follow buttons: https://www.pawtalog.com/profiles
Thanks in advance to anyone who helps out! 
2 Likes
@hninoowuttyeee123 You already have a prepared database?
Yes I do. I have one database and set 2 two fields “follower” and “followee”. Is the field type text or array? and is it possible to put user IDs in one field and count all the userID in that field?
Yes, it is possible.
There are surely different possibilities given, of how to structure your database, for your project.
There are 2 major types of how to use your DB
- verticaly-data-structure
- horizontaly-data-structure.
You have chosen the horizontaly one → using ARRAY-FIELDS.
I think i would do the same, or i would even use an OBJECT-FIELD in your case. But lets say we choose the ARRAY-FIELD-TYPE.
In the vertical DB-view, you will have a list of all your existing members (including all their data and ID) .
Each of your members will have several IDs in the follower & followee-FIELD (TYPE–>ARRAY).
You even don’t have to do/code much. I would suggest you first prefill your database with some manual entered dummy-values, to get a better overview, of how it would look like at the end.
Since you are working with ARRAYS, you will need the following in your later generated Filter-Engine…
hasSome(DB_FIELD, [])
To count your followers, all you’ll need to know, will be the length of the corresponding ARRAY.
This is really helpful ! May I know how to show data from array field type which is from database, on a page? I have to connect to dataset with respective field in order to show data on page, right? Textbox and input field do not work on page for array field type. How can I test and retrieve array data on page?
@hninoowuttyeee123
There are several different cases on how to display data on page…
- Using → REPEATER
- Using → TABLE
- Using → Dynamic-Page
- Using → HTML-Component
- Using → Custom-Elements
- and so on …
What is your use-case?
Can you provide a screenshot of your PROJECT-SETUP, for better understanding, what you exatly want to achieve?
@russian-dima Here. I wanna show follower numbers at the top right corners (no of folllwers are buttons and they are put in repeater), so the function will count every after one user has clicked on follow button. I wanna store every user ID in Follower field in my database as array and count how many followers are there for one shop. Is it possible? If it is possible to store userIDs as array, how can I store data as array field type and show data from array field type on page? Thanks for your concern. (they are designed to follow pages, not members, just like functions on facebook and other social media.)
So your choice was a REPEATER…
Okey, and the element which is related to your issue is a button → ok.
Let’s first make clear what is what?
- Your Database-ID??? —> “Followers_Followees” ← - - ?
- The related DB-Field-ID??? —> “followerId” <— ?
- And surely you have alsready setted up your → “followerid”-dbField as → TYPE-Array
Your → followerid-dbField will look like the following right…?
[ID1, ID2, ID3, ID4, ID5.......and so on]
["339384D023", "939355D023", "129382D222", "779384D623"]
So now, how to show this Array-Field-Values on your REPEATER?
Or to be more precize, you want to show the total amount of followers for each data-row in your database…
import wixData from 'wix-data';
$w.onReady(async function() {
let repData = await get_Data("Followers_Followees")
$w('#yourRepeaterIDhere').data = repData;
});
function get_Data(DATABASE){
wixData.query(DATABASE);
.query.find()
.then((res)=>{console.log("RES: ", res);
let items = res.items; console.log("Items: ", items);
let followers = res.items.followerId; console.log("Followers: ", followers);
let followCount = followers.length; console.log("Followers-Total: ", followCount);
return (items);
}).catch((err)=>{console.log(err); return {error: err};});
}
$w('#yourRepeaterIDhere').onItemReady(($item, itemData, index)=>{
$item('#yourButtonIdhere').label = itemData.followers.length;
//Doing here something when mouse-over button (inside-repeater)
$item('#yourButtonIdhere').onMouseIn((event)=>{console.log(event.target.id),
//..more code here?
//..more code here?
});
//Doing something here, when click onto button (inside-repeater)
$item('#yourButtonIdhere').onClick(async(event)=>{
//..more code here?
//..more code here?
});
});
Of course you will have to finish this by your own.
Good luck!
