Transforming an array into a string using Map Reduce

I am using an array map function to simplify an array of objects into a single string.

const formatEmails: (arr: { "default" : string }[]) => string = (arr: { "default" : string }[]) => 
arr.map(e => e["default"]).reduce((e, i) => e + i + "; ", "");

This method works well when the email only has the "default" key. But what if the email object contains additional keys like this:

 person_emails: [{ "default": '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="afdbcadcdb9eefdbcadcdb81ccc0c2">[email protected]</a>' }, { "home": '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3e4a5b4d4a0c7e4a5b4d4a105d5153">[email protected]</a>' }, { "work": '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ffbeafcfbbccffbeafcfba1ece0e2">[email protected]</a>' }]

How can I modify my code to handle such cases and generate a string like this: "default:[email protected]; home:[email protected]; work:[email protected]"

Just to clarify, my code runs the formatEmails function each time we read a row from the data export like this:

args.rowData["person_emails"] = formatEmails(args.rowData["person_emails"]);

Answer №1

Combining the entries of an object

const emails = [{ "default": '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d8acbdabace998acbdabacf6bbb7b5">[email protected]</a>' }, { "home": '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="681c0d1b1c5a281c0d1b1c460b0705">[email protected]</a>' }, { "work": '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="50243523246310243523247e333f3d">[email protected]</a>' }];
const result = emails.map(e => 
  Object.entries(e).map(en => en.join(':')).join('; ')
).join('; ');
console.log(result);

The code above can handle multiple key-value pairs within a single object as well

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Experiencing a "HEROES not found" error while following an Angular guide

I've been diving into Angular with the tutorial provided on https://angular.io. However, I've hit a roadblock at step 4. Displaying a list where I'm encountering an error in HeroesComponent. Cannot find name 'HEROES' The cod ...

C# - Banking System (Account Balance, Transaction History)

Embarking on a new personal endeavor developing a webapp for scouting groups. The frontend will be crafted in Angular2, while the backend will rely on a restful server built with asp.net/C#. One crucial aspect of the project involves accessing various ban ...

Manipulate Angular tabs by utilizing dropdown selection

In my latest project, I have developed a tab component that allows users to add multiple tabs. Each tab contains specific information that is displayed when the tab header is clicked. So far, this functionality is working perfectly without any issues. Now ...

What is the significance of the double exclamation mark operator in determining the truthiness or falsiness of an object's values?

Trying to determine the truthiness or falsiness of an object is proving to be a challenge for me. If an object contains all truthy values, I want one outcome; if it contains falsy values such as 0, an empty string, or undefined, I want a different outcom ...

encountering difficulties resolving dependency tree when attempting to generate a new Angular project

Today, I attempted to start a new Angular project using the command ng new <projectname>, but encountered the following error: npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: [email protected] npm ERR! Foun ...

Typescript may struggle with identifying indexed types accurately

type X = { aa: string; bb: number; }; const get = <Key extends keyof X, Value extends X[Key]>( key: Key, value: Value | ((v: Value) => Value) ) => { let newValue: Value; const x: X = { aa: '11', bb: 11 }; if ( ...

There is no module.hot in Webpack for TypeScript

I am trying to implement Webpack HMR in a NodeJS project that is built using TypeScript. However, I am encountering an issue where module.hot is not available: @types/webpack-env defines: declare var module: __WebpackModuleApi.Module This conflict ...

"Elaborate" Typescript Conditional Generic Types

Scenario I am currently working on implementing strong typing for the onChange function of a UI library's Select component. To provide some context, the existing type definition for their onChange is as follows: onChange?: (...args: any[]) => v ...

Adjust object values dynamically with TypeScript by identifying the corresponding keys

Currently, I am in the process of creating a function in TypeScript that will return another function allowing me to modify the keys of an object. This specific function is intended for use within a React reducer. For instance, if I have a state object wi ...

The bespoke node package does not have an available export titled

No matter what I do, nothing seems to be effective. I have successfully developed and launched the following module: Index.ts : import ContentIOService from "./IOServices/ContentIOService"; export = { ContentIOService: ContentIOService, } ...

Tips for testing a void method using unit testing

I'm aiming to increase my code coverage by writing unit tests. I have a method that simply triggers a notification without needing a response. How can I write a unit test for it? public error(message?: any, ...optionalParams: any[]) { if (this.is ...

Validating Angular for controls that are not in a form

I am working on validating a form using reactive form group for non-form controls. As part of my form, I am incorporating custom components. Take a look at the example below: <form [formGroup]='formGroupName' > <input type='text&a ...

Assigning fields dynamically based on a generic string union concept

My goal is to create a function that can dynamically add fields and functions to an object based on arguments provided. However, I'm encountering an issue where the function does not recognize the types of these dynamic fields. Here's a simple ex ...

Angular - Dividing Functionality into Multiple Modules

I am currently working with two separate modules that have completely different designs. To integrate these modules, I decided to create a new module called "accounts". However, when I include the line import { AppComponent as Account_AppComponent} from &a ...

Creating a custom Angular 2 component with specified HTML template content

I am currently working with Angular 2 and @ng-bootstrap. In my project, I have a modal dialog set up as follows: <template #editDialog let-c="close" let-d="dismiss"> <div class="modal-header"> <button type="button" class="close" ...

Ways to overlook compilation errors in Typescript/Electron for unreached code

I am diving into Typescript/Electron and attempting to create a text-based game. My journey began with a basic Electron application and I started implementing core logic using classes/interfaces that reference classes I have yet to implement. The snippet o ...

Customizing the default font color in Angular Material

I am currently navigating through theming in Angular Material and feeling a bit disoriented. I have implemented the prebuilt indigo-pink theme by importing it into my styles.scss as shown below: @import "~@angular/material/prebuilt-themes/indigo-pink.css" ...

Unable to utilize a generic model in mongoose due to the error: The argument 'x' is not compatible with the parameter type MongooseFilterQuery

Attempting to include a generic Mongoose model as a parameter in a function is my current challenge. import mongoose, { Document, Model, Schema } from 'mongoose'; interface User { name: string; age: number; favouriteAnimal: string; ...

Ways to display varied JSON information on a component in Angular 4

I am facing a challenge with a reusable component that fetches data from a JSON file. I want to customize the data displayed when this component is used as a subcomponent within other components. For example, let's say we have a Banana component: @U ...

What is the best way to align a title above menu items within a Material UI app bar when using TypeScript and React?

Check out my current app bar design: app bar image Here is the inspiration for the app bar layout I'm aiming for (title above menu items): inspiration app bar goal This snippet showcases my code: import * as React from 'react'; // More cod ...