Example of transforming the refinement label in currentRefinements widget

Using vanilla instasearch.js (4.x) and struggling a bit with transforming the returned date. The docs and examples shared by Algolia support are focused on just refining the Facet related data. So in the image below, there are examples of how to transform “DAY” in the screenshot below.

I am looking to transform the label for the refinement. The unix timestamp in the image below. Hoping maybe someone could share some example code that shows how to transform this.

const day  = Math.floor(new Date(**UR-UNIX**).getTime() / 1000) * 1000;
console.log(day )

you change the formate of day

Thank you, but I’m not looking for example of how to transform that particular value. Rather, I want to transform the applied refinement data.

So here is an item object returned from Algolia for this widget. I’d like to transform data elements in the refinements array. Say for example the label of entries in the refinements array. Algolia examples only show how you can transform data of the root item. This make sense.

image

Hi @dev23

I’m liking your interface! Is that a currentRefinements widget? As you said, you should be able use the transformItems() function for this.

I don’t have code written for this, but you’d basically call a map function to transform the labels, then return the item list. Something like:

currentRefinements({
  // ...
  transformItems(items) {
    return items.map(item => item.label = Math.floor(new Date(item.label).getTime() / 1000) * 1000;
console.log(day ));
  },
});

**Note: I just plugged in @ven’s code above, None of this is tested, but this approach should work.

Chuck, thanks but I don’t think that example will work. From the payload returned item.day == “day” . I am trying to transform the label in the refinements internal array where the label is the unit time stamp.

This is what we ended up FWIW.

transformItems(items) {
            return items.map((item) => {
                // just short circuit if the item refinements object doesn't have a key `attribute` or the value is not `day`
                if (
                    !item.hasOwnProperty("refinements") ||
                    !item.refinements.length ||
                    item.attribute !== "day"
                ) {
                    return item;
                }

                const accumulator = [];
                for (let i = 0; i < item.refinements.length; i++) {
                    const refinement = item.refinements[i];
                    if (refinement.attribute !== "day") {
                        // not the refinement we're looking for, so push it into the accumulator
                        accumulator.push(refinement);
                        continue;
                    }

                    // set date to unix timestamp of the `value`.
                    const date = new moment(parseInt(refinement.value), "X");

                    // create a new object with the same properties as the refinement object
                    accumulator.push(
                        Object.assign({}, refinement, {
                            label: date.format("ddd. MMMM D"),
                        })
                    );
                }

                // finally, push the accumulator array into the `refinements` property of the item
                return Object.assign({}, item, { refinements: accumulator });
            });
        }
1 Like

I’m an angular developer but I try it in js. if have the code in StackBlitz for example
Angular -Algolia_Search - StackBlitz. I will fix .

refinementList({
attribute: ‘day’,
// …
transformItems(items) {
return items.map(item => ({
…item,
label: Math.floor(new Date(item.label).getTime() / 1000) * 1000,
}));
},
});

/* or, combined with results */
refinementList({
// …
transformItems(items, { results }) {
return results.page === 0
? items.slice(0, 5)
: items;
},
});

try it .

Sorry, I guess I didn’t quite parse the problem. Glad you got where you needed to go.

Thank you, but I’m not looking for example of how to transform that particular value. Rather, I want to transform the applied refinement data..

.