Dynamic query results in repeater?

Ask the community
,
1

Hello guys,

I’ve created a dynamic page (with the help of wonderul people here in forum) which shows Dataset Query results perfectly in a table. I need to show query data with repeaters now! Please guide me !

In short, the code am using is similar to this:

==========================================

import wixData from ‘wix-data’;
export function partySearch_onclick(event) {
let searchValue = $w(‘#partyInput’).value;

let itemsCons = (wixData.query(‘JudgmentNotes’)
.contains(‘title’, searchValue))
.or(wixData.query(‘JudgmentNotes’)
.contains(‘held’, searchValue))

    .find() 
    
    .then(res =>  
    { 
        let foundItems = itemsCons.items;

$w(“#resultsTable”).columns = [
{
id: “col1”,
dataPath: “title”,
label: “Party Name”,
width: 150,
visible: true,
type: “string”,
},
{
id: “col2”,
dataPath: “held”,
label: “Held”,
width: 467,
visible: true,
type: “string”,
}
];

        $w('#resultsTable').rows = res.items; 
    });

}

==========================================

I’ve added a repeater and two text items in it for the repeating query results, but even after multiple attempts couldn’t code to make results display in repeater.

Please guide or share some similar code for repeaters.

Thanking in anticipation.

Anupam Dubey

1 Like
2

Hey there,

Using the repeater is similar to a table, but because it is much more flexible, there is a little more work to do.

Basically, it is a two step process.

  1. Set the repeater’s data property. This is like setting the table’s rows property. If you’re only setting it once, this should be pretty straightforward. But if you’re going to keep resetting it, you need to learn about how setting the data property affects the creation and deletion of repeated items. The Repeater API Reference has information about this.

  2. Use the repeaters onItemReady function to set an event handler that set’s up each new repeated item that is created. This is where you apply the data to the elements in the repeater’s items.

3

Thanks for the response Sam,

Though item properties are to be set only once, but me being a novice in coding, it’s herculean task for me!

Would be great if you could please share some example code sequence setting repeater item values to database query results.

4

It’s hard to tell exactly what you’re trying to do, but judging for your code for the table, you’ll want to do something like this for a repeater:

import wixData from 'wix-data';

$w.onReady( function () {
  $w('#resultsRepeater').onItemReady( ($w, itemData, index) => {
    $w("#titleElement").text = itemData.title;
    $w("#heldElement").text = itemData.held;
  } );
} );

export function partySearch_onclick(event) {
  let searchValue = $w('#partyInput').value;
  wixData.query('JudgmentNotes')
    .contains('title', searchValue))
    .or(wixData.query('JudgmentNotes')
      .contains('held', searchValue)
    )
    .find()
    .then(res => {
      $w('#resultsRepeater').data = res.items;
    } );
}
5

Thanks for guiding, Sam

You guys are really wonderful

6

I love when the questions I’m looking for have great answers like this!

Thanks Guys!

7

Hey guys,

i actually tried something similar.
I wanted to work with a repeater that also is connected with my database. I want the repeater to collapse during loading. The page has also an input box and a button, which i think would be wise to use with an onclick-event.
The user should be able to insert the values “name” and “city” into the insert box and get the queried results after that. The fitting results should exopand from the repeater.

Is something like this possible? Maybe i can use somethig from the code above? I already modified that code a bit but without success.

Greetings,

Dawd

8

Beautiful and useful answer! I had a page with a dynamic table, but this repeater version works a lot better!!!