Description Shortanage in Repeater Issue

Ask the community
,
1

I’ve tried 2 ways like below. No way has worked. Repeater began to show the description like that

<span style="font-weig . .
How can I deal with this?

722×509 22.7 KB

Nayeli’s code;

$w.onReady( () => {
  $w("#dynamicDataset").onReady( () => {

    $w("#repeater1").onItemReady( ($item, itemData, index) => {
 let theItem = itemData.description;
 var shortDescription = theItem.substr(0,100);
      $item("#description").text = shortDescription + " . . . ";
    });

  } );
 
} );

WixShow’s code;

import wixData from 'wix-data';

$w.onReady(async function () {

});

export function dynamicDataset_ready() {
  makeRepeater();
}

export function makeRepeater() {
  $w("#repeater1").forEachItem(($item, itemData, index) => {
      if(itemData.description.length > 100) {
          $item("#description").text = itemData.description.substr(0, 100) + "... Learn more";
      }
  });
}

#wixdata #repeateritem #shorteningdescription

2

@yisrael-wix Could you look at my code?

3

If you are using Nayeli (Code Queen) tutorial for limiting characters in a repeater as here.
https://support.totallycodable.com/en/article/limit-characters-in-a-repeater-using-wix-code

$w.onReady( () => {
  $w("#dataset1").onReady( () => {

    $w("#repeater1").onItemReady( ($item, itemData, index) => {
      let theItem = itemData.description;
      var shortDescription = theItem.substr(0,25);
      $item("#description").text = shortDescription + " . . . ";
    });

  } );
  
} );

Then you should be able to watch her YouTube video about it at the bottom of the article that would guide you through it all.

However, the first thing that you will notice is that she is using a normal text field whereas you are using a rich text field, for which you would need to use as shown here otherwise you will just get the full html code added as well.

You would probably have to look at using the html property instead of the text property in the code used above.

As talked about in this previous forum post here too.

Yes, you can use the Rich Text field type for that.
If you connect a text element to a rich text field, it will automatically display the HTML representation you entered in the database.

4

@givemeawhisky Opps, I had used the rich text, you are right. Unfortunately, I can’t do this with HTML property. I wonder if you could update my code?

import wixData from 'wix-data';

$w.onReady(async function () {
 //TODO: write your page related code here...

});

export function dynamicDataset_ready() {
    makeRepeater();
}

export function makeRepeater() {
    $w("#repeater1").forEachItem(($item, itemData, index) => {
 if(itemData.description.length > 100) {
            $item("#description").text = itemData.description.substr(0, 100) + "... Learn more";
        }
    });
}
5

Anyone knows how it can be hold?

6

Try changing the .text to .html and see what you get.
https://www.wix.com/corvid/reference/$w.Text.html#html

7

@givemeawhisky I still get the below

8 
import wixData from 'wix-data';

$w.onReady(async function () {
 //TODO: write your page related code here...

});

export function dynamicDataset_ready() {
    makeRepeater();
}

export function makeRepeater() {
    $w("#repeater1").forEachItem(($item, itemData, index) => {
 if(itemData.description.length > 1000) {
            $item("#description").html = "<p>... Learn more</p>";
        }
    });
}

It works with this code but I want to add short part of the description.

itemData.description.substr(0, 300) +

I couldn’t add

with the second code I have added.

9

OMG ! I did.

import wixData from 'wix-data';

$w.onReady(async function () {
 //TODO: write your page related code here...

});

export function dynamicDataset_ready() {
    makeRepeater();
}

export function makeRepeater() {
    $w("#repeater1").forEachItem(($item, itemData, index) => {
 if(itemData.description.length > 1000) {
            $item("#description").html = itemData.description.substr(0, 300) + "<p>... Learn more</p>";
        }
    });
}
10 
import wixData from 'wix-data';

$w.onReady(async function () {
 //TODO: write your page related code here...

});

export function dynamicDataset_ready() {
    makeRepeater();
}

export function makeRepeater() {
    $w("#repeater1").forEachItem(($item, itemData, index) => {
 if(itemData.description.length > 1000) {
            $item("#description").html = itemData.description.substr(0, 1000) + "<p>... Learn more</p>";
        }
    });
}
11

Great work and thanks for posting the final working code so that others can benefit as well.