Hello! I created a user input form that asks users to vote for 1 of 5 charities (radio buttons) and their name on our site (see screenshot 1.) Now, I want to create a live table that shows the total number of votes each of those 5 charities has (see example of table in screenshot 2.) Is there a way I can do this using the live data collected from the user input form?
Hey Anna,
I used this on a project with something similar:
let voteCount;
//this would go in your dataset's onReady
const voteQuery = itemData.vote;
wixData.query('database')
.eq('vote', voteQuery)
.find()
.then( (res) => {
let numItems1 = res.length;
voteCount = numItems1;
} );
In this case, the method used to display was a repeater (hence the itemData), so you would have to modify it just a bit for it to work with your table. The voteCount variable would be what displays on your table.
Good luck!
Hey David,
Thank you so much for your response! I’m VERY new to WixCode – could you tell me how to get the voteCount to show up in the table? I apologize if what I’m asking doesn’t make sense, I’m definitely out of my comfort zone and not fluent in code.
This is as far as I’ve gotten so far (lol) but I don’t know if I’m on the right track:
Again, thank you so much for your help, I truly appreciate it.
Anna
Since you’re a total newbie, I recommend checking out the API to understand some of the magic that’s going on here
In the meantime, I recommend using a repeater instead of a table for this, since hooking up the table would make the code considerably more complicated as you would have to create a dynamic array and feed it to the table. This should work for you on a repeater once you’ve connected it to your dataset in the editor:
import wixData from 'wix-data';
import wixWindow from 'wix-window';
$w.onReady(function() {
if (wixWindow.rendering.env === "browser") {
$w('#dataset4').onReady( () => {
//Make sure your repeater's onItemReady is also clicked in the properties panel
$w('#repeater').onItemReady( ($item, itemData, index) => {
//substitute vote for the name of the field you keep your votes in the database
const voteQuery = itemData.vote;
//substitute database for the name of your voting database
wixData.query('database')
//if your vote field allows more than one type of vote, change eq to contains
.eq('vote', voteQuery)
.find()
.then( (results) => {
let numVotes = results.length;
//voteCounter is an unconnected text element in your repeater
$item('#voteCounter').text = numVotes;
} );
} );
} );
}
} );
As I said, this will be easier than a table, but if you absolutely need a table, feel free to email me.
Hey @skmedia ,
WOW - thanks so much!!! You’re the best. So I got a little further (I think) and set up a repeater but I’m still getting hung up on how to connect the data to the repeater elements. I’ve read up on a few articles (like this one , this one and this one ) and I feel like I’m close but still not getting it.
I don’t want to waste your time, but if you’re willing to still help me (I may be a lost cause), do you want me to continue posting screenshots here or would you like me to email you directly? I understand if you have better things to do but I really do appreciate the help!!!
@anna94 You only need to hook up the repeater to the dataset using the GUI in the editor. I’ve written all the code you’ll need since the only element you need to connect through code is the #voteCounter. Each repeater iteration is an item and when it’s connected to a dataset it populates that item with itemData, so that’s all we’re doing here too.
@skmedia okay, I must be doing something wrong… I put the code in and connected the repeater to the dataset from the GUI, but when I hit preview it just listed the first line of the repeater infinitely. I set up the repeater like so:
and I’m wanting the total number of votes in the respective “01” text boxes. Right now our live database has over 400 votes - the database only has 3 columns:
So I was thinking I had to write code that would count all entries with “Bloom 365” as the charity, all entries with “Ebony House”, etc. then return those total counts in the respective repeater text boxes. I thought I could use the .count() query to tally up the votes, but maybe I’m wrong.
I don’t think I’m correctly connecting the database to the repeater in the code, and I also don’t know how to return the total counts to the respective text boxes in the repeater.
I’m sorry if this isn’t making sense or if I’m asking for something far more complicated than I made it seem like in my original post!
@anna94 I think the problem here is that there’s nothing to populate since your votes aren’t stored there. Are they in a different database?
@skmedia the votes are stored in a database called “CharityVote”. I placed a dataset (#dataset4) on this page you’re helping me with which is connected to the CharityVote database:
@anna94 And the voting process is by name, not by boolean?
@skmedia Correct – there are 5 radio buttons they can choose from, but whatever button they select populates in the database under one column as text:
front end survey:
@anna94 Oh I see. Your setup is quite different so yes it does require different code. I’ll point you in the right direction and give you a chance to figure it out
results.length gives you the number of total results, results.items gives you the string which you can see by using console.log() in preview mode.
strings can be designated by substring with brackets i.e. string[#]
and split
Thanks so much for your help, @skmedia ! I’m going to do some more research and see if I can figure it out I have a lot to learn, lol!!
@skmedia HI there, I use that bit of code and it’s working well but I’m just trying to figure out how to make each name only show up one time. Any ideas come to mind?
export function logs_ready ( ) {
function addDays ( date , days ) {
let result = new Date ( date );
result . setDate ( result . getDate () + days );
return result ;
}
$w ( “#filter” ). onClick (( event ) => {
$w ( ‘#repeater’ ). onItemReady (( $item , itemData , index ) => {
const Query = itemData . name ;
wixData . query ( ‘tutorial_logs’ )
. lt ( ‘_createdDate’ , addDays ( $w ( ‘#toDate’ ). value , 1 ) )
. gt ( ‘_createdDate’ , $w ( ‘#fromDate’ ). value )
. eq ( ‘name’ , Query )
. find ()
. then (( results ) => {
let numVotes = results . length + ’ Views’ ;
if ( results . length > 0 ) {
$item ( ‘#count’ ). text = numVotes ;
$item ( ‘#title’ ). text = Query ;
$w ( “#repeater” ). show ();
}
});
});
})
}