How to map an array of objects in a a new array with new key value-CodePudding

I have a situation where I have an array of objects like this:

[
    {
        "name": "Phone call",
        "value": "Phone call"
    },
    {
        "name": "SMS",
        "value": "SMS"
    },
    {
        "name": "Email",
        "value": "Email"
    }
]

I have to remap the above OBJ to a new one containing its translation which is similar to this from React-intl: formatMessage(formatMessage(messages.emailOptionPlaceholder)

And the idea is as follow:

if (obj.name === 'Email') formatMessage(formatMessage(messages.emailOptionPlaceholder) else obj.name

so the new array should contain the right translation which will populate a dropdown menu.

I tried so far like this but without success:

field.options.map(o => {
        return [
          o.name === 'Email'
            ? formatMessage(messages.emailOptionPlaceholder)
            : o.name,
          o.name === 'Phone call'
            ? formatMessage(messages.phoneOptionPlaceholder)
            : o.name,
          o.name === 'SMS'
            ? formatMessage(messages.smsOptionPlaceholder)
            : o.name,
        ];
      });

This gives back 3 arrays instead of one with the values I need.

My goal is to have an array containing the formatMessage(...) output for the 3 elemnts inside the object as example of the output:

[{
  name: Phone call
  value: <-- Phone call translation from formatMessage --> 
 }
{
  name: Email
  value: <-- Email translation from formatMessage --> 
 }
{
  name: SMS
  value: <-- SMS call translation from formatMessage --> 
 }
]

I'm getting that OBJ from back-end and need to put the translation of corresponding name inside a drop down menu and was wondering what solution can be better.

CodePudding user response：

Using .map is a possible solution, however you are not using it correctly. From mdn:

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

To fix your solution, you can use the following code:

field.options.map((o) => {
  if (o.name === "Email") {
    return { ...o, value: formatMessage(messages.emailOptionPlaceholder) };
  } else if (o.name === "Phone call") {
    return { ...o, value: formatMessage(messages.phoneOptionPlaceholder) };
  } else if (o.name === "SMS") {
    return { ...o, value: formatMessage(messages.smsOptionPlaceholder) };
  } else {
    return o;
  }
});

Note that .map returns a new array, so you need to save the result. If you want to mutate the objects directly, then use a simple forEach , like so:

field.options.forEach(o => {
      if (o.name === "Email") {
        o.value = formatMessage(messages.emailOptionPlaceholder);
      } else if (o.name === "Phone call") {
        o.value = formatMessage(messages.phoneOptionPlaceholder);
      } else if (o.name === "SMS") {
        o.value = formatMessage(messages.smsOptionPlaceholder);
      }
    })

CodePudding user response：

I would do it something like this. (not tested)

const mappings = {
    'Email': messages.emailOptionPlaceholder,
    'Phone call': messages.phoneOptionPlaceholder,
    'SMS': messages.smsOptionPlaceholder
};

const mapped = field.options.map((obj) => {
    const key = mappings[obj.name]
    if (key) {
        return {
            ...obj,
            value: formatMessages(key)
        }
    } else {
        // no mapping for object name.
        // do something to handle it or just return obj
        return obj
    }
}