How to concatenate fields in repeater

Ask the community
,
1

Dear All,

I have a repeater connected to a collection.

In this repeater there are three text fields also connected to the collection.

654×532 13.5 KB

I would like to concatenate the value of the three text fields into a fourth one.

If I use this code:

$w.onReady( () => {
$w(“#TextSubCategoryConcatenate”).text = $w(“#TextSubCategory1”).text + " – " + $w(“#TextSubCategory2”).text + " – " + $w(“#TextSubCategory3”).text;
});

the result is not the expected. Indeed, the correct label is not displayed.

How to have Architecture – Cartoons – Cinematography instead [Sub-Category 1] – [Sub-Category 2] – [Sub-Category 3]

Thank you for your help.

Best regards,
Domivax

2

Since it’s a repeater, you’ll have to use onItemReady():

$w("#repeate1").onItemReady( ($item, itemData, index) => {
    $item("#conacatText").text = `${itemData.fieldKey1}-${itemData.fieldKey2}-${itemData.fieldKey3}`;
    //use your actual element id and field keys
}
3

and of course put it inside the $w.onReady() and dataset.onReady()

4

Dear J.D.

Thank you for your quick reply. Your code works perfectly when the fields source is coming from a field from a collection but in my case the field labels to display come from ‘Reference’ fields.

I have two collections ‘Items’ & ‘Sub-Categories’ linked each others by 3 ‘Reference’ fields ‘Category1’ - ‘Category2’ - ‘Category3’

2715×1264 365 KB

1450×1819 178 KB

In the pictures, red are the links made by ‘Reference’ fields and green are the Label to display

For each category, it can be displayed separately making a connection inside the repeater (see my second picture from my first message).

Thank you for your help.

Best regards,
Domivax

5

@domivax so maybe you populate your repeater from a query using include() :
https://www.wix.com/corvid/reference/wix-data.WixDataQuery.html#include

Or create an afterQuery hook that searches for these values in the original collections.

6

Thank you J.D.

I am trying to use the include function but apparently there is something I did not understand.

My code is the following and it did not work ;-(

$w.onReady( () => {
$w(“#Repeater”).onItemReady( ($item, itemData, index) => {
wixData.query(“Items”)
.include(“category1”, “category2”, “category3”)
.find()
.then( (results) => {
if(results.items.length > 0) {
//let books = results.items;
//let firstBook = items[0];
let category1 = category1.subCategoryLabel;
let category2 = category2.subCategoryLabel;
let category3 = category3.subCategoryLabel;
} else {
// handle case where no matching items found
}

$w(“#TextSubCategoryConcatenate”).text = (‘category1’) + " – " + (‘category2’) + " – " + (‘category3’);

} )
.catch( (error) => {
let errorMsg = error.message;
let code = error.code;
} );
})
});

Thank you for your help.

Best regards,
Xavier

7 
  //code....
.then( (results) => { 
$w("#repeater1").data = results.items;
})
///....
$w("#repeater1").onItemReady( ($item, itemData, index) => {
    $item("#concatText").text = `${itemData.referenceField1.fieldKey1}-${itemData.referenceField2.fieldKey2}-${itemData.referenceField2.fieldKey1}`;
    //instead of "referenceField" use the key of the reference field, instead of "fieldKey" use the field key as appears in the original collection
}
8

Thank you very much J.D.

It is working now

1319×601 55.5 KB

but why I have now a message error regarding the ‘subCategoryLabel’. Why must I define it. I do not understand?

Wix code SDK error: The “onItemReady” function of “Repeater” threw the following error: Cannot read property ‘subCategoryLabel’ of undefined

2145×325 36.4 KB

Our final code:

$w.onReady( () => {
wixData.query(“Items”)
.include(“category1”, “category2”, “category3”)
.find()
.then( (results) => {

$w(“#Repeater”).onItemReady( ($item, itemData, index) => {

 $item("#TextSubCategoryConcatenate").text = `${itemData.category1.subCategoryLabel} – ${itemData.category2.subCategoryLabel} – ${itemData.category3.subCategoryLabel}`;

})

. catch ( (error) => {
let errorMsg = error.message;
let code = error.code;
});

});

});

Thank you very much for your help.
Best regards,
Domivax

9

@domivax as I can see in your screenshot above, some of your records don’t have the reference value, and that’s why you’re getting these errors.
To get rid of these error, you’ll need to modify your code:

//code...
if(!itemData.category1.subCategoryLabel){
  itemData.category1.subCategoryLabel = "";
}
if(!itemData.category2.subCategoryLabel){
  itemData.category2.subCategoryLabel = "";
}
if(!itemData.category3.subCategoryLabel){
itemData.category3.subCategoryLabel = "";
}
 $item("#TextSubCategoryConcatenate").text = `${itemData.category1.subCategoryLabel} – ${itemData.category2.subCategoryLabel} – ${itemData.category3.subCategoryLabel}`; 
//code...
10

@jonatandor35 I am so sorry but I still have the error message. I just realized that the three categories must be filled out to have a good concatenate string and no error message but items can have only one category. In case of only one category, ‘category1’ is always filled out first, 2 categories = ‘category1’ & ‘category2’ are always filled out.

I thought somethings like that:

//code
if (itemData.category2.subCategoryLabel === null) {$item(“#TextSubCategoryConcatenate”).text = ${itemData.category1.subCategoryLabel};}

else if (itemData.category3.subCategoryLabel === null) {$item(“#TextSubCategoryConcatenate”).text = ${itemData.category1.subCategoryLabel} – ${itemData.category2.subCategoryLabel};}

else {$item(“#TextSubCategoryConcatenate”).text = ${itemData.category1.subCategoryLabel} – ${itemData.category2.subCategoryLabel} – ${itemData.category3.subCategoryLabel};}
//code

but unfortunately, it does not work in case of one or two categories.

I have the error message and the concatenate does not work.

and I have another question, what is the meaning of the ‘!’ from your code.

if(!itemData.category2.subCategoryLabel)

Thank you for your help.
Best regards,
Domivax

11

@domivax
! stands for not.
!itemData.category2 is like writing itemDataCategory2 === false;
If itemData.category2.subCategoryLabel doesn’t exist its Boolean value is false.

Now let’s do it in another way that probably will be better in your case:

//...code
let texts = [];
let concatText = "";
if (itemData.category1.subCategoryLabel){//that means if the value exist
 texts.push(itemData.category1.subCategoryLabel);
}
 if (itemData.category2.subCategoryLabel){
  texts.push(itemData.category2.subCategoryLabel);
} 
  if (itemData.category3.subCategoryLabel){
   texts.push(itemData.category3.subCategoryLabel);
}
if (texts.length > 0) {
 concatText = texts.join("  –  ");
}
$item("#TextSubCategoryConcatenate").text = concatText;
//code