Custom Data Transform

Sometimes you might want to alter the data received by the Search API before it's passed along to the template for rendering. For example, if you've set a direct answer on the phone number field, you'll likely want to format the raw phone number to add parentheses and dashes before it's rendered.

If you want to mutate the data provided to the render/template before it gets rendered, use the transformData hook.

Usage

All properties and values returned from transformData will be accessible from templates.

ANSWERS.addComponent('SearchBar', {
  container: '.search-container',
  transformData: (data) => {
    // Extend/override the data object
    return Object.assign({}, data, {
      title: data.title.toLowerCase()
    })
  }
})

Example

Here's an example of using a custom data transform for the Direct Answer component.

Code

https://codesandbox.io/embed/hopeful-meitner-wzfbf?codemirror=1&fontsize=13&hidenavigation=1&theme=dark&view=preview

Explanation

To start, the DirectAnswer component returns phone numbers that look like this:

First, create a function that formats the DirectAnswer value for phone number, keying off of the fieldType:

function formatDirectAnswer(fieldName, fieldType, value) {

  //adapted from https://stackoverflow.com/a/8358185
  if (fieldType == "phone") {
    return value
      .replace(/\D+/g, "")
      .replace(/(\d{1})(\d{3})(\d{3})(\d{4})/, "$1 ($2) $3-$4");
  }
  return value;
}

Next, in the DirectAnswer component, call that function within transformData:

this.addComponent('DirectAnswer', {
    container: '.direct-answer-container',  
    transformData: (data) => {
        //data has fieldName, fieldType, value
        return {
            ...data,
            answer: {
                ...data.answer,
                value: formatDirectAnswer(data.answer.fieldName, data.answer.fieldType, data.answer.value)
            }
        }
    }
});

Since transformData is called before the data is passed to the template, it formats the phone number as stipulated. When phone number is returned, it will look like this:

Custom Data Formatting

Note: There are known bugs with this feature — proceed with caution.

You can format specific entity fields using fieldFormatters. These formatters are applied before the transformData step.

Each formatter takes in an object with the following properties:

• entityProfileData
• entityFieldValue
• highlightedEntityFieldValue
• verticalId
• isDirectAnswer

Usage

ANSWERS.init({
  apiKey: '<API_KEY_HERE>',
  experienceKey: '<EXPERIENCE_KEY_HERE>',
  fieldFormatters: {
    'name': (formatterObject) => formatterObject.entityFieldValue.toUpperCase(),
    'description' : (formatterObject) => formatterObject.highlightedEntityFieldValue
  }
});