How to retrieve the array item on 'mapProp' or getItemSummary as created fetchList on ArrayFields

[rapid cosmos]

arrayFields: {
label: { type: "text" },
title: { type: "text" },
content: { type: "text" },
description: { type: "textarea" },
quote: {
type: "external",
placeholder: "Select a quote",
showSearch: true,
fetchList: async ({ query }) => {
// Simulate delay
await new Promise((res) => setTimeout(res, 500));

        return quotes
          .map((quote, idx) => ({
            index: idx,
            title: quote.author,
            description: quote.content,
          }))
          .filter((item) => {
            if (!query) return item;

            const queryLowercase = query.toLowerCase();

            if (item.title.toLowerCase().indexOf(queryLowercase) > -1) {
              return item;
            }

            if (item.description.toLowerCase().indexOf(queryLowercase) > -1) {
              return item;
            }
          });
      },

      mapProp: (result) => {
       ** return { index: result.index, label: result.title, title: result.title };**
      },

getItemSummary: (item) => item.label,

[rapid cosmos]

there can use resolveData to resolve the array value ?

[urban flume]

Hi @rapid cosmos! Are you trying to populate the values of the array item with the selected value from the external field?

In which case, yes, use resolveData. https://puckeditor.com/docs/integrating-puck/dynamic-props

[rapid cosmos]

Yes, but resloveData can't triggle as the type is array and how to get the index of array ?

[urban flume]

      resolveData: async ({ props }) => {
        return {
          props: {
            myArray: props.myArray.map((item, index) => ({
              label: item.quote.title,
              content: item.quote.content,
            })),
          },
        };
      },

Does that help?

[rapid cosmos]

I can get the array. but i can't retrieve index from {changed} object

Also, It can't trigger the resolveData function when the fetchList is changed

For example :

When I update the quota label from fetchList, the UI will update the fields on Columns (there type is array list) like content = 'XXXOld age has def.....'

[urban flume]

Correct, changed doesn't currently detail items in an array.

But it's possible to check which item has changed yourself by tracking an ID on each array item

I'm not clear why my resolveData example wouldn't work, unless you need to make expensive calls for each item in the array, and want to avoid doing that

[rapid cosmos]

thanks for advance, The fetchList should be triggered even if one of fields which is under the array list or click 1 records on fetchList from Api. right ?

[urban flume]

Sorry, I don't understand the question. Mind rephrasing?

[rapid cosmos]

I added 1 field (quoteTest) with fetchList and quoteTestLabel. and want to update the quoteTestLabel and label after return from fetchList async functions. there is trigger resolveData. my question is how to update the quoteTestLabel and label with array index ?

[urban flume]

Right. You shouldn't need the array index - just map all the buttons like this

  resolveData: async ({ props }, { changed }) => {
    if (!props.quote)
      return { props, readOnly: { title: false, description: false } };

    if (!changed.quote && !changed.buttons) {
      return { props };
    }

    // Simulate a delay
    await new Promise((resolve) => setTimeout(resolve, 500));

    return {
      props: {
        title: quotes[props.quote.index].author,
        description: quotes[props.quote.index].content,
        items: props.buttons.map((buttonProps) => ({
          ...buttonProps,
          label: buttonProps.quoteTest.label || buttonProps.label,
          quoteTestLabel:
            buttonProps.quoteTest.label || buttonProps.quoteTestLabel,
        })),
      },
      readOnly: { title: true, description: true },
    };
  },