Angular: создание 2 объектов из 1 объекта в массиве

Question

У меня есть массив, как показано ниже

 [
  {
    "id": 42,
    "name": "updateDate",
    "displayName": "UPDATE DATE",
    "uiControl": "DATERANGE",
    "dataType": "STRING",
    "uiOrder": 1,

  },
  {
    "id": 44,
    "name": "name",
    "displayName": "First Name",
    "uiControl": "TEXTBOX",
    "dataType": "STRING",
    "uiOrder": 1,
  },
]

Я хочу отфильтровать объекты в этом массиве со свойством UiControl === DATERANGE и создать 2 объекта из отфильтрованного объекта, а также добавить 'FROM' и 'TO' к имени и свойству displayname, как показано ниже

окончательный вывод:

[{
  "id": 42,
  "name": "fromupdateDate",            // 'from'appended to name property
  "displayName": "FROM UPDATE DATE",   // 'FROM' appended to displayName property
  "uiControl": "DATERANGE",
  "dataType": "STRING",
  "uiOrder": 1,
 },
 {
  "id": 42,
  "name": "toupdateDate",               // 'to' appended to name property
  "displayName": "TO UPDATE DATE",      // 'TO' appended to displayName
  "uiControl": "DATERANGE",
  "dataType": "STRING",
  "uiOrder": 1,
 },
 {                                      // this object stays the same
   "id": 44,
   "name": "name",
   "displayName": "First Name",
   "uiControl": "TEXTBOX",
   "dataType": "STRING",
   "uiOrder": 1,
  }]


We can create such an array in multiple ways, but I want to find an optimized way of creating such an object. 

Answer 1

flatMap будет делать то, что вы хотите:

const input = [{
    "id": 42,
    "name": "updateDate",
    "displayName": "UPDATE DATE",
    "uiControl": "DATERANGE",
    "dataType": "STRING",
    "uiOrder": 1,

  },
  {
    "id": 44,
    "name": "name",
    "displayName": "First Name",
    "uiControl": "TEXTBOX",
    "dataType": "STRING",
    "uiOrder": 1,
  },
];
const output = input.flatMap(v => v.uiControl === "DATERANGE" 
  ? [
      { ...v,
        name: `from${v.name}`,
        displayName: `FROM ${v.displayName}`
      },
      { ...v,
        name: `to${v.name}`,
        displayName: `TO ${v.displayName}`
      }
    ] 
  : [v]);
console.log(output);

Обратите внимание, что вам придется скомпилировать это с поддержкой esnext.См. этот вопрос для более подробной информации.Это также не будет работать из коробки на IE или Edge.Если это проблема в вашем случае использования, вы захотите использовать полифилл или положитесь на map + reduce, например:

const output = input.map(v => v.uiControl === "DATERANGE" 
  ? [
      { ...v,
        name: `from${v.name}`,
        displayName: `FROM ${v.displayName}`
      },
      { ...v,
        name: `to${v.name}`,
        displayName: `TO ${v.displayName}`
      }
    ] 
  : [v])
  .reduce((acc, cur) => (acc.push(...cur), acc), []);