How do I modify this code to get it work with my repeater? - Collapsing empty dataset elements

Ask the community
,
1

Hi I have a dataset that is used by a dynamic page set and the below code for it which works perfectly well. If there is no data in each element, it is collapsed.

However, I have a need to use it with a new dynamic page set with one difference. I need to put all teh elements referenced in the code into a repeater now whereas before they were loose on the page. I’m not sure how as to modify it to make it work as the whitespace has returned. I have VERY limited experience but always want to be enabled to learn! Help modifying the code would be very appreciated! :grinning:

$w.onReady(function () {
 // Assign the data set column and the matched element's id on the page
 let datasetMap = {
        greenBodyTitle1: "#text137",
        ctaSentance: "#text135",
        greenBodyTitle2: "#text152",
        bodyAnswerCta1: "#text139",
        greenBodyTitle3: "#text140",
        bodyAnswerCta3: "#text153",
        greenBodyTitle4: "#text154",
        bodyAnswerCta4: "#text141",
        greenBodyTitle5: "#text138",
        bodyAnswerCta5: "#text155",
        greenBodyTitle6: "#text142",
        bodyAnswerCta6: "#text143",
        greenBodyTitle7: "#text144",
        bodyAnswerCta7: "#text145",
        greenBodyTitle8: "#text146",
        bodyAnswerCta8: "#text147",
        greenBodyTitle9: "#text148",
        bodyAnswerCta9: "#text149",
        greenBodyTitle10: "#text150",
        bodyAnswerCta10: "#text151",
    };
 // Get the current data set on the page
 let currentItem = $w('#dataset1').getCurrentItem();
 // Iterate over the map, make the item collapsed to hide it
 for (var column in datasetMap) {
 if (currentItem.hasOwnProperty(column) && currentItem[column]) {
 // Ignore when the data item available
        } else {
            $w(datasetMap[column]).collapse();
        }
    }
});
2

Hey,

If you want to use code to display database collection items on a repeater you can use the query() function from the wix-data API as well as the repeaters onItemReady() function.

I hope this helps!

Dara | Corvid Team

3

Thanks for replying Dara. Unfortunately, it doesn’t as I’m not too versed in this. I need it to hide text elements on my repeater when the columns they are linked to in my database are empty. Could you please offer me a line or two of code that I could then copy/paste to cover all of the other elements in the repeater? That would be a MAJOR help :slight_smile:

4

Hello Dara, hello dbloom,

when you follow one of Dara’s suggestions …

( you can use the query() function)
… i think it would be the more simple way to get your aim.

You can query and filter a DATABASE like this example here…

import wixData from 'wix-data';

function myFUNCTION() {
  wixData.query("myDATABASE_NAME")
  .isNotEmpty("yourREFERENCE_FIELD")
  .find()
  .then( (results) => {
    if(results.items.length > 0) {
      let firstItem = results.items[0]; //see item below
    } else {
      // handle case where no matching items found
    }
  } )
  .catch( (err) => {
    let errorMsg = err;
  } );
  }

This should find only fields which are not emply.

Then you take the RESULTS of the filter and put it to your REPEATER.
Something like this…

$w("#myRepeater").data = results
5

Thank you kindly for the reply! When I set the code as:

import wixData from 'wix-data';

function myFUNCTION() {
  wixData.query("#dataset1")
  .isNotEmpty("#text139")
  .find()
  .then( (results) => {
 if(results.items.length > 0) {
 let firstItem = results.items[0]; //see item below
    } else {
 // handle case where no matching items found
    }
  } )
  .catch( (err) => {
 let errorMsg = err;
  } );
  }

  $w("#repeater1").data = results

to test if #text139 gets hidden or not, I get an error on the last line, the #repeater1 line - it says #repeater1 is not defined. Sadly, I don’t know how to define it! Also when I implement this for the 24 fields in the repeater, do I repeat the lines from wix.Data - >Let errorMsg for all of the fields? I’m sure you can tell my ignorance by my questions - thanks so much!

6
  1. Of course you have to put the last code-line also into your function.
  2. Your REPEATER is also called as → “repeater1” —> element-ID.
import wixData from 'wix-data';

function myFUNCTION() {
  wixData.query("#dataset1")
  .isNotEmpty("#text139")
  .find()
  .then( (results) => {
 if(results.items.length > 0) {
 let firstItem = results.items[0]; //see item below
  $w("#repeater1").data = results
    } else {
 // handle case where no matching items found
    }
  } )
  .catch( (err) => {
 let errorMsg = err;
  } );
  }

EDIT:
I do not think that this will work, because you are mixing DATASET with DATABSE-QUERY.

But we will wait for a result :grin:

7

Thank you! - Yes as predicted, after publishing with this code, it does not collapse the element and leaves whitespace.

8 
import wixData from 'wix-data';

$w.onReady(function () {   })

export function myButtonIdHere_click(event) {myFUNCTION()}

function myFUNCTION() {
  wixData.query("myDATABASE_NAME")//<-->ATTENTION DATABASE-NAME!
  .isNotEmpty("#COLUMN") //<-->ATTENTION REFERENCE-FIELD here!
  .find()
  .then( (results) => {
 if(results.items.length > 0) {
 let firstItem = results.items[0];
   console.log(results)
   console.log(firstItem)
   console.log(firstItem.title)
 $w("#repeater1").data = results
    } else {
 // handle case where no matching items found
    }
  } )
  .catch( (err) => {
 let errorMsg = err;
  } );
  }

This will still not do what you want, because you have to add more CODE to achieve the collapsing of elements.

What does this CODE do ?

  1. Quering a DATA-Collection
  2. Filtering all entries, which are NOT EMPTY.
  3. Gives the RESULTS back.
  4. Sets REPEATERS-DATA to founded results.

So, the REPEATER should now show all values, which are not empty in database in a selected column of your choice.

And now it’s your turn to expand end modify it to complete it like you want to have it.

9

I will troubleshoot this for a few days. I can’t thank you enough for your willingness to help!

10

No problem we all were BEGINNER one day :grin: