Good morning, I'm trying to adapt my bank response (They are category tickets) To be able to group in react-select but I'm having trouble, I found incredible posts here, but I'm not able to adapt to what I want, most come with an array, using reduce..

I'm going to use the react-select group component I will leave an example base.

export const colourOptions: readonly ColourOption[] = [
  { value: 'ocean', label: 'Ocean', color: '#00B8D9', isFixed: true },
  { value: 'blue', label: 'Blue', color: '#0052CC', isDisabled: true },
  { value: 'purple', label: 'Purple', color: '#5243AA' },
  { value: 'red', label: 'Red', color: '#FF5630', isFixed: true },
  { value: 'orange', label: 'Orange', color: '#FF8B00' },
  { value: 'yellow', label: 'Yellow', color: '#FFC400' },
  { value: 'green', label: 'Green', color: '#36B37E' },
  { value: 'forest', label: 'Forest', color: '#00875A' },
  { value: 'slate', label: 'Slate', color: '#253858' },
  { value: 'silver', label: 'Silver', color: '#666666' },
];

export const flavourOptions: readonly FlavourOption[] = [
  { value: 'vanilla', label: 'Vanilla', rating: 'safe' },
  { value: 'chocolate', label: 'Chocolate', rating: 'good' },
  { value: 'strawberry', label: 'Strawberry', rating: 'wild' },
  { value: 'salted-caramel', label: 'Salted Caramel', rating: 'crazy' },
];

it takes 2 arrays of objects and joins it into 1 array

 export const groupedOptions: readonly GroupedOption[] = [
  {
    label: 'Colours',
    options: colourOptions,
  },
  {
    label: 'Flavours',
    options: flavourOptions,
  },
];

today I have a response from the bank returning the following data;

    {
    "message": "Ticket category found",
    "body": [
        {
            "id": "8dc31d42-edf3-4e2a-aceb-ca0dbd8001b3",
            "name": "WTT",
            "childrenName": "Verificar serviço de envio"
        },
        {
            "id": "a1eb77c0-a772-49e3-8775-9abe14c81002",
            "name": "WTT",
            "childrenName": "Deletar imagem"
        },
        {
            "id": "9cb1658c-58af-424c-9b64-e2e2f90fd26e",
            "name": "WTT",
            "childrenName": "Recuperar backup"
        },
        {
            "id": "4bf08032-7073-4e87-b565-90334c045ac1",
            "name": "Sistemas MV",
            "childrenName": "Criar usuario"
        },
        {
            "id": "bf6be5f9-d53e-4502-9236-e3c25c6e83ea",
            "name": "Sistemas MV",
            "childrenName": "Desbloqueio de usuario"
        },
        {
            "id": "3161ff31-d2b9-4609-8b56-ff1dc8f507fd",
            "name": "Sistemas MV",
            "childrenName": "Alterar senha"
        },
        {
            "id": "059f8977-1d36-4b99-9420-58431914087d",
            "name": "Email",
            "childrenName": "Esqueci minha senha"
        },
        {
            "id": "1b4fc962-ffd6-40f5-bebd-b35cbdca9224",
            "name": "Email",
            "childrenName": "Criação de nova conta"
        },
        {
            "id": "6a26e722-63e5-4957-9eeb-36e7cc85e695",
            "name": "Email",
            "childrenName": "Bloqueio de conta"
        }
    ],
    "error": false
}

the idea was to group by "names" 1 object only with WTT items, or another only with MV Systems, etc.

example need response:

const array = [
  {
    label: "WTT",
    options: [
      {
        value: "ocean",
        label: "Ocean",
      },
      {
        value: "ocean",
        label: "Ocean",
      },
      {
        value: "ocean",
        label: "Ocean",
      },
      {
        value: "ocean",
        label: "Ocean",
      },
    ],
  },
  {
    label: "Sistemas Mv",
    options: [
      {
        value: "ocean",
        label: "Ocean",
      },
      {
        value: "ocean",
        label: "Ocean",
      },
      {
        value: "ocean",
        label: "Ocean",
      },
      {
        value: "ocean",
        label: "Ocean",
      },
    ],
  },
];

CodePudding user response：

Solution

  const bankResponse = {
    "message": "Ticket category found",
    "body": [
        {
            "id": "8dc31d42-edf3-4e2a-aceb-ca0dbd8001b3",
            "name": "WTT",
            "childrenName": "Verificar serviço de envio"
        },
        {
            "id": "a1eb77c0-a772-49e3-8775-9abe14c81002",
            "name": "WTT",
            "childrenName": "Deletar imagem"
        },
        {
            "id": "9cb1658c-58af-424c-9b64-e2e2f90fd26e",
            "name": "WTT",
            "childrenName": "Recuperar backup"
        },
        {
            "id": "4bf08032-7073-4e87-b565-90334c045ac1",
            "name": "Sistemas MV",
            "childrenName": "Criar usuario"
        },
        {
            "id": "bf6be5f9-d53e-4502-9236-e3c25c6e83ea",
            "name": "Sistemas MV",
            "childrenName": "Desbloqueio de usuario"
        },
        {
            "id": "3161ff31-d2b9-4609-8b56-ff1dc8f507fd",
            "name": "Sistemas MV",
            "childrenName": "Alterar senha"
        },
        {
            "id": "059f8977-1d36-4b99-9420-58431914087d",
            "name": "Email",
            "childrenName": "Esqueci minha senha"
        },
        {
            "id": "1b4fc962-ffd6-40f5-bebd-b35cbdca9224",
            "name": "Email",
            "childrenName": "Criação de nova conta"
        },
        {
            "id": "6a26e722-63e5-4957-9eeb-36e7cc85e695",
            "name": "Email",
            "childrenName": "Bloqueio de conta"
        }
    ],
    "error": false
}

const addedResponse = (processedData, label) => processedData.filter((d)=> d.label === label)

const processBankResponse = (data) => {
    const processedData = [];
    for(let d of data){
        const temp = addedResponse(processedData, d.name);
        if(!!temp.length){
             temp[0].options.push(d);
        } else {
             processedData.push({
                label: d.name,
                options: [d]
            })
        }
        
    }
    return processedData;
}

console.log(processBankResponse(bankResponse.body));