Filter for repeater and iFrame-map

Ask the community
,
1

Hello all,

I have created a filter condition for my repeater in which the locations from my database should be displayed:

function search () {
	
	wixData.query("Ladestationen")
	.contains("ladekabel", String($w("#ladekabel").value))
	.and(wixData.query("Ladestationen").contains("geraete_typ", String($w("#dropdown1").value)))
	.and(wixData.query("Ladestationen").contains("title", String($w("#searchBar").value)))
	
	.find()
	.then(results => {
		$w("#repeater4").data = results.items;
	})
}

I now want the filter conditions to be applied to my Leaflet map as well. The card is in the HTML element and the data was passed to it via postMessage method:

wixData.query("Ladestationen")
    .find()
    .then((results) => {
      results.items.forEach((item) => {
        // Post message to HTML element for each item
        $w("#html1").postMessage(JSON.stringify(item));
      });
    })
    .catch((error) => {
      console.error(error);
    });

window.onmessage = function (event) {
      var message = event.data;
      var data = JSON.parse(message);

but I have no idea how to do it (I’ve been trying for days)…

I would like the maps to display ALL locations from the database and then create a function in the HTML element code that removes all markers that do not hit when selecting a filter option. Can you tell me what the procedure for this could be?

If my method should be completely wrong, can you tell me how to synchronize the filter conditions from my repeater and the Leaflet card in the iFrame instead?

I would be extremely happy about any help!
Thanks!

2

I would like the maps to display ALL locations from the database and then create a function in the HTML element code that removes all markers that do not hit when selecting a filter option. Can you tell me what the procedure for this could be?

Your steps should be…

  1. Do the filterings on Wix-Page
  2. Get filtering-results into a variable or as → OBJECT.
  3. Send only the FILTERED-RESULTS over to HTML.
  4. Once your HTM_-Component has recieved the new filtered data → immediately first clear all setted locations on map first (RESET).
  5. After RESET was completed → set new locations!

And please no double-postings!

https://community.wix.com/velo/forum/coding-with-velo/transferring-filter-conditions-in-velo-code-to-the-html-element

3

Dear Russian-Dima (according to your site),

Thank you for your answer, I am sure you just wanted to help me, thank you very much, even if your answers sounded slightly passive aggressive.
Yes, believe it or not, I started learning JS and Velo only 1,5 month ago, but I don’t know anything about so many things, so I need your help, Dimon.

You said I should do my filtering in velo code. I unfortunately only knew this method to filter there (wixData.query(“Database”).contains .find.then results.items). I think this is not the best and only method. Do you have a tutorial link or concrete link to a doc so I can take a look? Most importantly how should I create the filter as an object, can you tell me more about that?

That would be great :wink:

Thanks in advance

4

A lot of my answers just sounds agressive, but in most cases it just looks like.

“Dimon”

Seems you are multilingual aswell?

I hope that you have seen my second message aswell, inside your second opened post.

However, some facts about of how to generate a good filter.
Normaly i would say, all what you have to do, is to seach for FILTERING-ENGINES, FILTER-ENGINE, FILTER inside of this forum.

I am sure you would find a lot of examples.

For example…

  1. A very old post, but with lot of information…

Following and reading this → you will surely find a lot more examples connected to this post.

  1. Or reading this post…

Here you would get already a good example of how to build a FILTER-ENGINE…

  1. Or here another one…(where you also can find a COMPLETE-FILTERING-CODE)

If it comes to generate a good working, fast, dynamic and multifunctional FILTERING-ENGINE —> then there a almost no boundaries for improving precesses.

The quality of your FILTER-ENGINE, will be generated by…

  1. Using a DATASET, or generating it by code only.
  2. Generating it on front-end or backend?
  3. Depending on your database-setup / database-structure.
  4. Depending on which elements you are using on your page for filtering actions.
  5. Depending on used code-techniques.

What should be your main-goals, when generating a FILTER-ENGINE?

  1. It should be → FAST!

  2. It should be as most as possible flexible and dynamic.

  3. It should be able to work also with bigger databases, without any problems.
    Most issues starts, when you work with bigger databases, holding bigger data-packages.

  4. By the way, searching trough all the given posts, just found my own beginnings…

  1. All you have to do —> is to use the SEARCH…

  1. https://community.wix.com/velo/forum/coding-with-velo/display-number-of-followers-1

  2. …and so on…and so on… —> you will find a big bunch of reading-material, if it comes to the FILTER-TOPIC.

5

Thank you very much, I found some links very helpful.
That was a bit cumbersomeI, but I have now also finally solved my problem.

6

Anybody said → that good coding is easy. :wink: