RefinementList with objects

Hi!

I have the following data that I would like to use in a refinementlist:

{
  "title": "My title",
  "attrs": [
      {
        "lang_code": "ar",
        "attr_type": "mediatype",
        "value_type": "EBOOK",
        "attr": "الكتاب الاليكتروني"
      },
      {
        "lang_code": "no",
        "attr_type": "mediatype",
        "value_type": "EBOOK",
        "attr": "Ebok"
      },
      {
        "lang_code": "sv",
        "attr_type": "mediatype",
        "value_type": "EBOOK",
        "attr": "E-bok"
      },
      {
        "lang_code": "ar",
        "attr_type": "subject",
        "value_type": "HISTORICAL_STORIES",
        "attr": "الروايات التاريخية"
      },
      {
        "lang_code": "no",
        "attr_type": "subject",
        "value_type": "HISTORICAL_STORIES",
        "attr": "Historiske fortellinger"
      },
      {
        "lang_code": "sv",
        "attr_type": "subject",
        "value_type": "HISTORICAL_STORIES",
        "attr": "Historiska berättelser"
      },
  ],
}

Using a RefinementList I’m able to specify attrs.attr as attribute to be able to search for Historiska berättelser for example. However, I would like to get hold on the full object from attrs, so that I in transformItems can filter out the objects that are in a certain language, for example Swedish.

Is this possible or do I have to rethink the data structure? For example to have a field just for indexing and keep the above structure for display.

The other only similar topic I found concatenates data and then splits it when rendering the refinementlist: Widget refinementList - Color (name,hexacode)

I resolved it with the same approach as described in the linked issue, by grouping data in a separate field. I name the new field label, like so:

  {
    "lang_code": "no",
    "attr_type": "subject",
    "value_type": "HISTORICAL_STORIES",
    "attr": "Historiske fortellinger",
    "label": "no|HISTORICAL_STORIES|Historiske fortellinger",
  },

Then I created a refinementlist:

const RefinementListAttributes = connectRefinementList(
  ({ items, refine, createURL, currentRefinement }) => {
    const appState = useAppState();
    const classes = useStyles();

    const handleClick = (event, label) => {
    event.preventDefault();
      refine(label);
    };

    const handleDelete = (event, label) => {
    event.preventDefault();
      refine(label);
    };

  const values = items
    // Just show specific language
    .filter(item => {
      const [langCode, type, label] = item.label.split('|');
      return langCode === appState.currentLocale;
    })
    .map((item, i) => {
      const [langCode, type, label] = item.label.split('|');
      return item.isRefined ? (
        <Chip
          key={`${type}-${i}`}
          label={`${label} (${item.count})`}
          onDelete={e => handleDelete(e, item.value)}
          color="primary"
        />
      ) : (
        <Chip
          key={`${type}-${i}`}
          label={`${label} (${item.count})`}
          onClick={e => handleClick(e, item.value)}
          color="primary"
          variant="outlined"
        />
      );
    });
  return <Fragment>{values}</Fragment>;
  }
);