Блог

Как мы манипулируем массивом объектов для замены определенных значений и добавления новых ключей и значений в angular typescript?

Я хотел заменить значение идентификатора значением идентификатора участника, а затем добавить другое полное имя ключа, где значение равно имени фамилии.

Спасибо за любую идею и помощь. Оцененный. С уважением.

#Текущее решение

  this.data = this.data.map((item) => {
              let id = item.memberId;
              return {
                ...item,
              }
            });
 

#Исходные Данные

 [
    {
        "id": 10017,
        "firstName": "Alexa",
        "lastName": "Rimura",
        "roleDisplay": "COVP,DVP Real Estate",
        "companyName": "MS",
        "title": "COO",
        "memberId": 1,
        "roleDto": [
            {
                "id": 6,
                "name": "COVP", 
                "isShow": true,
                "transactionRoleId": 9
            },
            {
                "id": 7,
                "name": "DVP Real Estate",
                "isShow": true,
                "transactionRoleId": 6
            }
        ],
        "transactionRoleList": "Architect, Construction Project Director"
    },
    {
        "id": 10018,
        "firstName": "Briana",
        "lastName": "Christoval",
        "roleDisplay": "Architect,Construction Project Director",
        "companyName": null,
        "title": null,
        "memberId": 2,
        "roleDto": [
            {
                "id": 8,
                "name": "Architect",
                "isShow": true,
                "transactionRoleId": 12
            },
            {
                "id": 9,
                "name": "Construction Project Director",
                "isShow": true,
                "transactionRoleId": 11
            }
        ]
    }
]
 

#Ожидаемый Выход

 [
    {
        "id": 1,
        "firstName": "Alexa",
        "lastName": "Rimura",
        "fullName": "Alexa Rimura
        "roleDisplay": "COVP,DVP Real Estate",
        "companyName": "MS",
        "title": "COO",
        "memberId": 1,
        "roleDto": [
            {
                "id": 6,
                "name": "COVP", 
                "isShow": true,
                "transactionRoleId": 9
            },
            {
                "id": 7,
                "name": "DVP Real Estate",
                "isShow": true,
                "transactionRoleId": 6
            }
        ],
        "transactionRoleList": "Architect, Construction Project Director"
    },
    {
        "id": 2,
        "firstName": "Briana",
        "lastName": "Christoval",
        "fullName:" "Briana Christoval,
        "roleDisplay": "Architect,Construction Project Director",
        "companyName": null,
        "title": null,
        "memberId": 2,
        "roleDto": [
            {
                "id": 8,
                "name": "Architect",
                "isShow": true,
                "transactionRoleId": 12
            },
            {
                "id": 9,
                "name": "Construction Project Director",
                "isShow": true,
                "transactionRoleId": 11
            }
        ]
    }
]
 

Вы почти на месте. Обновите свойство id и добавьте свойство FullName, как показано ниже:

 this.data = data.map((item) => {
  return {
    ...item,
    id: item.memberId,
    fullName: item.firstName   ' '   item.lastName
  }
});
 

В качестве альтернативы вы можете выполнить логику с помощью канала/отображения наблюдаемого с помощью оператора rxjs.

 getMembers() {
  return this.http.get<any[]>('/assets/data.json')
    .pipe(
      map((items: any[]) =>
        items.map(item => {
          return {
            ...item,
            id: item.memberId,
            fullName: item.firstName   ' '   item.lastName
          };
        })
      )
    );
}
 

Образец решения на СтекбЛитце

Вот так?

 this.data = this.data.map((item) => {
    return {
       ...item,
       id: item.memberId
    }
});