Help with Coding issue (Filtering Content)

Ask the community
, ,
1

Question:
I am relatively new to coding and have been working on coding for a specific page on my website. The goal is to be able to filter my data using two factors (City and State) with the dropdown showing states and users being able to input their city with text. I have coding that I think is (almost) correct but I can’t get it to actually run. Maybe someone has some insight on where my error(s) is?

Here is the code:

import wixData from ‘wix-data’;
import wixWindow from ‘wix-window’;
import { getMemberById } from ‘backend/members’;

$w.onReady(function () {
$w(“#dropdown1”).onChange(() => {
filterData();
})

$w("#input1").onInput(() => {
    filterData();
})

function filterData() {
    let filterBuilder;
    if ($w("#dropdown1").value) {
        let state = $w("#dropdown1").value;
        console.log("start:"+state);
        filterBuilder = wixData.filter().gt("state", state)
            .and(wixData.filter().lt("state", state))
            .and(wixData.filter().contains("city", $w("#input1").value))
    } else {
        filterBuilder = wixData.filter().contains("city", $w("#input1").value)
    }
                    
    
    }

    $w("#dataset1").setFilter(filterBuilder)
        .then(() => {
            $w("#dataset1").onReady(async () => {
                let state = (await $w("#dataset1").getItems(0, 12)).items;
                if (state.length > 0) {
                    $w("#columnStrip11").expand();
                    $w("#columnStrip12").collapse();
                } else {
                    $w("#columnStrip11").collapse();
                    $w("#columnStrip12").expand();
                    $w("#text29").text = "Oops! No matches found..."
                    $w("#text30").text = "Search for another city near you."
                }
            })
        })


$w("#repeater4").onItemReady(async ($item, itemData, index) => {
    var dob = itemData.dateOfBirth;
    $item("#text10").text = "Name of Playgroup";
    $item("#text31").text = "City " + itemData.state ;
    $item("#text28").text = "Age of Children" ;
     $item("#text9").text = "Cost of Playgroup" ;
      $item("#text259").text = "Day(s) and Times" ;
       $item("#text260").text = "Email or website for more information"
2

try this and adjust to suit.

$w("#input1").onInput(() => {
    filterData();
});

$w("#dropdown1").onChange(() => {
    filterData();
});

function filterData() {
    let filterBuilder;
    if ($w("#dropdown1").value) {
        let state = $w("#dropdown1").value;
        console.log("start:"+state);
        filterBuilder = wixData.filter().eq("state", state)
            .and(wixData.filter().contains("city", $w("#input1").value));
    } else {
        filterBuilder = wixData.filter().contains("city", $w("#input1").value);
    }

    $w("#dataset1").setFilter(filterBuilder)
        .then(() => {
            $w("#dataset1").onReady(async () => {
                let state = (await $w("#dataset1").getItems(0, 12)).items;
                if (state.length > 0) {
                    $w("#columnStrip11").expand();
                    $w("#columnStrip12").collapse();
                } else {
                    $w("#columnStrip11").collapse();
                    $w("#columnStrip12").expand();
                    $w("#text29").text = "Oops! No matches found...";
                    $w("#text30").text = "Search for another city near you.";
                }
            });
        });
}
3

Awesome, thank you! So it dispalyed my repeater - and was filtering data clearly (for states where there was no information inputted it did not display) but didn’t actually show the information in the actual repeater.

Then I added:

$w(“#repeater4”).onItemReady(async ($item, itemData, index) => {
$item(“#text10”).text = “Name of Playgroup”;
$item(“#text31”).text = “City " + itemData.state ;
$item(”#text28").text = “Age of Children” ;
$item(“#text9”).text = “Cost of Playgroup” ;
$item(“#text259”).text = “Day(s) and Times” ;
$item(“#text260”).text = “Email or website for more information”
}

But for some reason that isn’t working either - any idea where my error is? Thank you for your assist!

4

Realized it may be helpful to show the whole code:

import wixData from ‘wix-data’;
import wixWindow from ‘wix-window’;

$w(“#input1”).onInput(() => {
filterData();
});

$w(“#dropdown1”).onChange(() => {
filterData();
});

function filterData() {
let filterBuilder;
if ($w(“#dropdown1”).value) {
let state = $w(“#dropdown1”).value;
console.log(“start:”+state);
filterBuilder = wixData.filter().eq(“state”, state)
.and(wixData.filter().contains(“city”, $w(“#input1”).value));
} else {
filterBuilder = wixData.filter().contains(“city”, $w(“#input1”).value);
}

$w("#dataset1").setFilter(filterBuilder)
    .then(() => {
        $w("#dataset1").onReady(async () => {
            let state = (await $w("#dataset1").getItems(0, 12)).items;
            if (state.length > 0) {
                $w("#columnStrip11").expand();
                $w("#columnStrip12").collapse();
            } else {
                $w("#columnStrip11").collapse();
                $w("#columnStrip12").expand();
                $w("#text29").text = "Oops! No matches found...";
                $w("#text30").text = "Search for another city near you.";
            }
        });
    });

}
$w(“#repeater4”).onItemReady(async ($item, itemData, index) => {
$item(“#text10”).text = “Name of Playgroup”;
$item(“#text31”).text = “City " + itemData.state ;
$item(”#text28").text = “Age of Children” ;
$item(“#text9”).text = “Cost of Playgroup” ;
$item(“#text259”).text = “Day(s) and Times” ;
$item(“#text260”).text = “Email or website for more information”
}

5

To know what the error is and where to find it, you should have to take a look onto your console. What error do you get inside console?

Try this one…

import wixData from ‘wix-data’;
import wixWindow from ‘wix-window’;

$w.onReady(()=> {
	$w('#dataset1').onReady(()=> {
		$w('#input1').onInput(()=> {filterData();});
		$w('#dropdown1').onChange(()=> {filterData();});

		$w('#repeater4').onItemReady(($item, itemData, index) => {
			$item('#text10').text = 'Name of Playgroup';
			$item('#text31').text = 'City ' + itemData.state ;
			$item('#text28').text = 'Age of Children' ;
			$item('#text9').text = 'Cost of Playgroup';
			$item('#text259').text = 'Day(s) and Times'; 
			$item('#text260').text = 'Email or website for more information';
		});

		function filterData() {let filter;
			if ($w('#dropdown1').value) {
				let state = $w('#dropdown1').value; console.log('start: ', state);        
				filter = wixData.filter()
				.eq('state', state)
				.contains('city', $w('#input1').value);
			} else {
				filter = wixData.filter()
				.contains('city', $w('#input1').value);
			}

			$w('#dataset1').setFilter(filter)
			.then(() => {
				let state = $w('#dataset1').getItems(0, 12).items; console.log("State: ", state);
				if (state.length>0) {$w('#columnStrip11').expand(); $w('#columnStrip12').collapse();}
				else {$w('#columnStrip11').collapse(); $w('#columnStrip12').expand();
					$w('#text29').text = "Oops! No matches found...";
					$w('#text30').text = "Search for another city near you.";
				}
			});
		}	
	});	
});
  1. First your page has to be ready.
  2. Your dataset has also to be ready first.
6

Awesome this worked great! I have one more question if you have an idea - is there a way to conenct an image to an element in the repeater? I have tried with adding various elements on the repeater to connect but I keep getting errors returned.
For example, I added:

$item(‘#image57’).image=item.Data.flyer

but I return “image57” cannot return image

7

ALMOST …
$item(‘#image57’).image=item.Data.flyer;

BETTER…
$item(‘#image57’).src=item.Data.flyer;

8

Solved! Thank you for the help!

1 Like