WixDataQuery slow?

Ask the community
,
1

Hi, I’m a bloody beginner with JavaScript and I just wrote my first working snippet, but it seems to run quite slow. The mouseIn function takes 1-2 sec. to show the text in the text box. The mouseOut function works without a delay.

What I want to do:
I have a map with around 30 buttons (circles). Each button indicates a certain type of terrain. When the user hovers a cercle, it gets coloured and the title and description for this point will be loaded and displayed in two text elements on the page. When the user leaves the circle, the information will be cleared.

He’s how the Map looks:

603×578 162 KB

The DataCollection “Terrain” is very small yet, there are just two records for testing.

My code:

First question:
Is there a faster way to get the content out of the DataCollection and show it in two text-elements?

Second question:
Is there a possibility to get the ID over the hovered (active) button in the mouseIn function, instead of allocating it manually?

Would be great if anyone can help me, thank you!

Urs

2

Hi Urs,
I like your thoughts,
I would approach like this:

import wixData from 'wix-data';
let mapInfos;
$w.onReady(function () {

 getMapsInfos();
});

export function getMapsInfos() {
   wixData.query("Terrain")
   .find() 
   .then((resultMapInfos) => {
      mapInfos = resultMapInfos; 
      }) 
   .catch((err) => { 
      let errorMsg = err;
    })
}

And for the mouseIn:


export fuction button2_mouseIn(event, $w) {
 const buttonID = event.target.id; // don't forget to give the buttons the same name stating from zero (button0, button1 etc).
 const buttonNumber = buttonID.slice(6);
 $w('#title').text = mapInfos[buttonNumber].title;
 $w('#description').text = mapInfos[buttonNumber].description;
}

Good luck!

3

Hi Roi,
Thank you for your speedy answer!
I’d like to understand what you did. You placed the query to be executed as soon as the page is loaded and the query loads the whole table “Terrain” (I think like a tmp-table in SQL?). This information keeps available until the user changes the page.
Doing this prevent us of querying the DataCollection on each mouse-over. Right?

I implemented the code, renamed the test-buttons to button0 and button1 and did the same within the button-field in the DataCollection. I also renamed the text fields on the page to #title and #description.

I checked the content of mapInfos on the console before I moved the mouse to button0. It was loaded correctly.

On mouseover at button0, I got the following error msg: Uncaught TypeError: Cannot read property ‘title’ of undefined

Could you imagine the reason for that?
Urs

The current code is:
import wixData from ‘wix-data’;
let mapInfos;
$w.onReady(function () {
getMapsInfos();
});

export function getMapsInfos() {
wixData.query(“Terrain”)
.find()
.then((resultMapInfos) => {
mapInfos = resultMapInfos;
console.log(mapInfos);
})
.catch((err) => {
let errorMsg = err;
});
}

export function button0_mouseIn(event, $w) {
const buttonID = event.target.id; // don’t forget to give the buttons the same name stating from zero (button0, button1 etc).
console.log(buttonID);
const buttonNumber = buttonID.slice(6);
console.log(buttonNumber);
$w(‘#title’).text = mapInfos[buttonNumber].title;
$w(‘#description’).text = mapInfos[buttonNumber].description;
}

export function button0_mouseOut(event, $w) {
$w(“#title”).text = “”;
$w(“#description”).text = “”;
}

btw: how do you post the code, that it appears as text in a box?

4

Hi,
Can you please share a link to your site?

Roi

5

Hi,
How can I do that, since the site isn’t published yet?

Urs

6

The link to the editor will do the job

7

Here it is:

8

Minor fix:

$w('#title').text = mapInfos.items[buttonNumber].title;
$w('#description').text = mapInfos.items[buttonNumber].description;
9

Hi Roi,
Great! Now it works! Thanks a lot for your help.

Urs