Remove duplicates, send to table instead of dropdown

tiaan · May 6, 2018, 6:54am

Hi Guys

I’m having a bit of trouble with this script (copied and adjusted from on of Jeff’s articles), can’t seem to figure it out. What I would like to do is retrieve values from a database, construct a unique list and post it to a table (instead of a dropdown as per Jeff’s example). However, at this point my table is still showing blanks… Any ideas?

$w.onReady(function () {
	wixData.query("myCollection")      
  		.find()
  		.then((results) => {
		  	const uniqueMachines = getUniqueMachines(results.items);
		  	$w("#table1").rows = buildOptions(uniqueMachines);    
  		});
  	function getUniqueMachines(items) {    
    		const machinesOnly = items.map(item => item.machine); 
       		return [...new Set(machinesOnly)];
	}
	function buildOptions(uniqueList) {   
		return uniqueList.map(curr => {
			return {row:curr};  
		});
	}
});

yisrael-wix · May 6, 2018, 11:50am

Hey tiaan,

How are you. Glad to see you’re busy - keeps you off the streets.

The code looks OK to me. Maybe you have blank entries in the database?

Post the link to the site so I can inspect.

Yisrael

tiaan · May 6, 2018, 12:57pm

Hi Yisrael

I’m glad to see I’m not the only one working on weekends!

Yeah I thought so too. The site’s link is https://john61829.wixsite.com/pcbeta.

For this specific column, no blanks. I tried many different ways to send the data but it just doesn’t want to fill…

yisrael-wix · May 6, 2018, 1:08pm

Hey tiaan,

I’m confused. I’m looking at your HOME page, and I see 5 or 6 (lost count) onReady() page functions. Only one is allowed. I’m not sure what happens when there is more than one. One of the onReady() functions references " #table1" , however that table does not exisit on the page.

I really don’t know where the problem might be because the code just isn’t valid. You should delete, or “comment out” the onReady() functions that you don’t need, and fix up the code to be what you’re aiming to do. We can then attempt to identify where the problem is. That is, if the problem doesn’t already get fixed when cleaning up the code.

Yisrael

tiaan · May 6, 2018, 1:17pm

Hi Yisrael

Lol, I’ve used more than one onReady many times before with no problems, I wasn’t aware it could not be done.

Anyway, I blanked out the other code and only made this bit active, but it still acts the same. I also just published it, so the table should be visible on your end now.

Tiaan

yisrael-wix · May 6, 2018, 1:25pm

The table is now visible, but the dropdowns, that I assume are used to provide the table contents, just have the default dropdown values and not the values that are relevant to your site.

yisrael-wix · May 6, 2018, 1:27pm

Also, the table is in the margin and I’m unable to view it. I have to move it to the middle of the screen by moving things around.

tiaan · May 6, 2018, 1:28pm

I blanked out the code that sends data to the dropdowns. What I essentially want to do is bin the dropdowns all together and use the table for a filter that I can filter the repeater with

yisrael-wix · May 6, 2018, 1:31pm

Sorry, but I can’t get anything working. The table is blank, the dropdowns are default component values. I really don’t know what I’m looking at.

Perhaps create a separate “clean” page with just the relevant components and code. This will make it easier on both of us to determine what’s going on.

tiaan · May 6, 2018, 1:36pm

Lol…, ok let me explain what I’m trying to do. I don’t want to use the dripdowns at all, so ignore them.

What I want to do is replace the dropdowns with tables, send unique data to the tables as I did before with the dropdowns, and use the table data to create a filter for the dataset that feeds the repeater.

So in short, replace dropdowns with scrollable tables, send the unique data to the tables instead of to the dropdowns

yisrael-wix · May 6, 2018, 1:51pm

Aha! Got it.

I added a console.log() statement like this:

const uniqueMachines = getUniqueMachines(results.items);
console.log(uniqueMachines);   
$w("#table1").rows = buildRows(uniqueMachines);

I see that you have an array of machine names. However you will need to provide an array of row data in the “proper format”. Each element in the array needs a key and value. The key is the table key (e.g. “machine”), and the value would then be something like “Machine 1”.

If I hand coded it (which I did), it would look something like this:

const tableData = [
    {"machine": "Machine 1"},
    {"machine": "Machine 2"},
    {"machine": "Machine 3"},
    {"machine": "Machine 4"},
    {"machine": "Machine 5"}
  ];

I hope this helps.

Yisrael

tiaan · May 6, 2018, 1:55pm

Hi Yisrael

I actually tried that, in the last line I changed it to ‘return {key: ‘machine’, value: curr}’ but that didn’t do much to solve anything really

yisrael-wix · May 6, 2018, 1:59pm

It’s not
{key: ‘machine’, value: curr}

but it’s:
{“machine”: “Machine 1”}

so you want:
return {“machine”: curr};

tiaan · May 6, 2018, 2:18pm

What do you know, that did the trick. Thanks Yisrael

tiaan · May 6, 2018, 4:01pm

For reference, this is what it looks like, with the code below to show how it works. Thanks to Yisrael for the help!

What is not shown here is 4 text items that are on the page. I’ve set them to hidden on load. The 4 white boxes on the left are normal tables that will be used for filters

Start your page code with the following:

$w.onReady(function () {
	getUniqueMachines();
	getUniqueMaterials();
	getUniqueTools();
	getUniqueDiameters();
	clearTexts();
});

function clearTexts(){
	$w("#text32").text = "";
	$w("#text33").text = "";
	$w("#text34").text = "";
	$w("#text35").text = "";
}

Get unique data from the database and send it to a table. I did this for every one of the 4 tables on the left.

function getUniqueMachines(){
	wixData.query("myCollection")      
  		.find()
  		.then((results) => {
		  	const uniqueMachines = getUniqueMachines(results.items);   
		  	$w("#table1").rows = buildRows(uniqueMachines);    
  		});
  	function getUniqueMachines(items) {    
    		const mcahinesOnly = items.map(item => item.machine); 
       		return [...new Set(mcahinesOnly)];
	}
	function buildRows(uniqueData) {   
		return uniqueData.map(curr => {
			return {"machine": curr};  
		});
	}
}

Then, to the onClick of a table, run the code below:

export function table1_click(event, $w) {
	$w("#table1").onCellSelect((event, $w) => {
	$w("#text32").text = event.cellData;
		$w("#dataset1").setFilter(wixData.filter()
			.contains("machine", $w("#text32").text)
			.contains("material", $w("#text33").text)
			.contains("tool", $w("#text34").text)
			.contains("diameter", $w("#text35").text)
		);
	});
}

azevedobang · May 23, 2018, 2:59pm

I´m trying to do it in a table, but i could.
With your code i can do it:
| CITY | IDNUMBER |
| | 123 |
| | 321 |
| | 456 |
| | 890 |

So its return just the idnumber of my items. A array with idnumber without duplicate.
But i need that return the name, and the city too. I need something like this:

My database exemple:
| NAME | EMAIL | REGION | CITY | IDNUMBER |
| A | a@a.com | RegionA | X | 123 |
| A | b@b.com | RegionA | X | 123 |
| A | c@c.com | RegionA | X | 123 |
| B | x@x.com | RegionA | Y | 321 |
| B | y@y.com | RegionA | Y | 321 |
| C | h@h.com | RegionA | X | 456 |
| D | j@j.com | Region B | B | 890 |

And i Need this table as result:
| NAME | REGION | CITY |
| A | RegionA | X |
| B | RegionA | Y |
| C | RegionA | X |

Could someone help me?