Dataset Hook not working

Hi. I’m trying to create a simple hook for my dataset but am getting the following error:

Wix code SDK Warning: The text parameter of "cproblemdescription" that is passed to the text method cannot be set to null or undefined.

What I’m trying to accomplish: Take a Rich Text field in the dataset and convert it to plain text via a hook, and then display the plain text version on the page.

The dataset’s name is CaseStudies. The Rich Text field I’m trying to convert to plain text is called clientProblem1. And I’m storing the plain text version in plainTextClientProblem.

Here is my hook code in my data.js

export function CaseStudies_afterGet(item, context) {
    item.plainTextClientProblem1 =        item.clientProblem1.replace(/(<([^>]+)>)/ig, "").replace(/(&rsquo;)/ig, "'");
    return item;
}

On the page side, I have the following code to set the text of cproblemdescription to plainTextClientProblem. The dataset’s ID is dynamicDataset.

$w.onReady(function () {
    $w("#dynamicDataset").onReady(() => {
        populateCalculatedFields();
    });
    $w("#dynamicDataset").onCurrentIndexChanged( (index) => {
        populateCalculatedFields();
    });
});

function populateCalculatedFields() {
    const currentItem = $w("#dynamicDataset").getCurrentItem();
    $w("#cproblemdescription").text = currentItem.plainTextClientProblem1;

}

I think I followed pretty well this article on Wix support, so I can’t figure out why it is not working.

Is there someone who can help me with this? Thank you so much.

Maybe the clientProblem1 value for this item is empty. Check your collection.

Thanks, J. D. clientProblem1 is from the collection that have 9 items in that collection, and all items have its field “clientProblem1” filled with RichText data. See the attached image. Am I calling it wrong?

@webadmin17052 Maybe you forgot to sync the live site with the sandbox (and it’s empty in the live collection)?

@jonatandor35 They are synced and in the Live site database.

Also, not sure if this is the cause: I’m using this in a repeater. The repeater is listing all 9 items and each of them has its own clientProblem1. Can this be the cause of error? I can’t imagine why since when the collection is called, I assume the repeater can pass an item into the hook code, instead of the entire collection?

Bump. Really need some help to figure out how to get hooks working. Can anyone suggest where to look for the missing link? Sorry for the inconvenience. Thanks in advanced.

I don’t see any repeater in your code… You only get a single item (the currentItem).
So you’re doing something wrong.
If you want to populate a repeater you need to get all the 9 items, assign them to the repeater and use an onItemReady() function to assign the relevant value to the relevant items.

Your error states that the parameter cproblemdescription cannot be set to null, but I don’t see where you are using cproblemdescription in your code. But before we address the problem with the hook, let’s step back and consider Repeaters

I don’t see in your code where you are handling a Repeater. You should have an onItemReady() function or a forEachItem() function. Keep in mind that you will need to make sure you have a properly defined Selector Scope for the Repeated Items . This ensures that the components for each item are properly referenced.

Once you have your Repeater working properly, you can then tackle the problem you’re having with the hook.

Thanks, Yisrael and J.D. Sorry about the beginner situation. I’m new to Wix/Corvid. Still trying to wrap my mind around this. After reading the document, I modified my code a bit here. (I haven’t changed the hook code yet.)

Here is what I have now. I see the same error happening, but it happens 9 times. I assume that is a good thing since all repeater items are now doing something:

$w.onReady(function () {
    $w("#dynamicDataset").onReady(() => {
        $w("#repeater1").forEachItem(($item, itemData, index) => {
            populateCalculatedFields($item);
        });
    });
});

function populateCalculatedFields(item) {
$w("#cproblemdescription").text = item.plainTextClientProblem1;
}

And here is what my repeater looks like in the editor with the text box “cproblemdescription” shown.

#cproblemdescription is the textbox in the repeater item template that I need the plaintext version of the original rich text field (from the hook) to populate.

And the error that I am getting (9 times for 9 items in the repeater):

Wix code SDK Warning: The text parameter of "cproblemdescription" that is passed to the text method cannot be set to null or undefined.

I thought maybe I needed to define a .text attribute of the text field added by the hook, so I changed the function to:

function populateCalculatedFields(item) {
$w("#cproblemdescription").text = item.plainTextClientProblem1.text;
}

But then I got this error. (Just once, instead of 9 times)

An error occurred in one of datasetReady callbacks TypeError: Cannot read property 'text' of undefined

Thank you for any help that you can give me.

Thanks

Played with the code a bit more. Instead of going through hook, I tried just replacing the text directly on the page in the repeater. It seems to work… partly…

The replacement happened for all repeater items, but there seems to be a lot of extra line breaks now and extra /nbsp code.
I couldn’t find the string to use to replace line break. Can someone help me with removing line breaks for this block of text? I am trying to completely remove all the line breaks and have all text flow through as one paragraph without any break.

I’m trying to make the center grey text block look like this:

But it now looks like this:

My current updated code:


$w.onReady(function () {
    $w("#dynamicDataset").onReady(() => {
        $w("#repeater1").forEachItem(($item, itemData, index) => {
            var regex = /(<([^>]+)>)/ig;
            var specialRegex = /(&rsquo;)/ig;
            $item("#cproblemdescription").text = itemData.clientProblem1.replace(regex, "").replace(specialRegex, "'");
        });
    });
});

Thanks!

Here’s a good thread from Stackoverflow that has a fairly comprehensive discussion of what’s needed to remove different line breaks.

I hope this helps.

@yisrael-wix Awesome. Thank you so much, Yisrael!! Found this to work perfectly:

replace(/(?:\r\n|\r|\n|&nbsp;)/g, '')
1 Like

Sorry to bother again. On this page, I need to create a dropdown user-input for filtering. I used the editor and followed this article and set up my filter. But once filtering happens, the updated repeater items are not updated by my above code. Is there a different method I need to use to trigger the code when the repeater items are updated by the dropdown filter?

Thanks in advanced.

You will need to call forEachItem() again after the Repeater is updated.

@yisrael-wix Thanks. I was thinking about that, too. The update is done by the filter in editor. I am at lost how to set up the call after update. Do I call it from the drop down’s onChange event? I was looking for something like onUpdate() for repeater but didn’t see it.

Thanks

I’m not sure how to reference the Repeater update event. I looked at all the event handlers for repeater and for dataset, not sure any of them is what I need. Do I use dataset’s onReady(), onItemValuesChanged(), or onCurrentIndexChanged()?

@webadmin17052 How are you updating your Repeater? Are you setting the .data property?

Whenever the Repeater is updated, the onItemReady() event handler is invoked for all new items. If you are using the .data property, you can force all items to be new but first setting .data to null, and then setting .data to the new items. You can look at the Corvid Examples for uses of Repeaters.

@yisrael-wix Thanks for the link. I’ll take a look.

I’m not sure how the repeater is updated. I used the editor to set up user-input-element filter for my dataset, and then select the dropdown for the filter. That was it. Didn’t set any .data. When I preview the page, changing the dropdown results in the list updated based on the dropdown option I selected. I assume the editor use onChange() for the dropdown element? Do I add another onChange() event of the dropdown and add forEachItem() to update the repeater items?

Added this block of code and it works now. Thanks so much for your incredibly helpful replies, Yisrael!

$w("#repeater1").onItemReady( ($item, itemData, index) => {
    var regex = /(<([^>]+)>)/ig;
    var specialRegex = /(&rsquo;)/ig;
    $item("#cproblemdescription").text = itemData.clientProblem1.replace(regex, "").replace(/(?:\r\n|\r|\n|&nbsp;)/g, '').replace(specialRegex, "'");
});
1 Like