Is there a way to extract data from a single line?

Question

Is there a way to extract data from a single line?

In my code, I have a simple object retrieved like this:

  getSelectedRecipients(event) {
    this.aliasesService.getRecipients(event.nr)
    .subscribe(
      res => {
        this.recipients = res;
        this.isVisible = true;
      },
      err => console.error(err)
    );
  }

The output of

this.recipients

is:

{
recipients:
"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="741b1a1134101b19151d1a5a171b19">[email protected]</a>,↵
<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a5d1d2cae5c1cac8c4cccb8bc6cac8">[email protected]</a>,↵
<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="50243822353510343f3d31393e7e333f3d">[email protected]</a>,↵
<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cea8a1bbbc8eaaa1a3afa7a0e0ada1a3">[email protected]</a>
"}

I now need to display this data in a table. Currently, it looks like this:

<td id="recipients">
{{recipients.recipients }}
</td>

Resulting in:

<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="deb1b0bb9ebab1b3bfb7b0f0bdb1b3">[email protected]</a>, <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="760201193612191b171f185815191b">[email protected]</a> ... <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="63050c161123070c0e020a0d4d000c0e">[email protected]</a> [button]

However, I want the displayed format to be:

<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="acc3c2c9ecc8c3c1cdc5c282cfc3c1">[email protected]</a> [button]
<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4430332b04202b29252d2a6a272b29">[email protected]</a> [button]
.
.
.
<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a8cec7dddae8ccc7c5c9c1c686cbc7c5">[email protected]</a> [button]

How can I achieve this formatting? I need it for the next step which involves allowing the user to delete a specific recipient, such as [email protected], instead of all recipients at once.

javascript angular typescript

Answer 1

Answer №1

To begin, my recommendation is to construct a pipe that will divide the recipients:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'split-recipients'})
export class SplitRecipientsPipe implements PipeTransform {
  transform(recipients: string[]) {
    return recipients
        .split(',')
        .filter(Boolean)
        .map(r => r.trim());
  }
}

If you prefer each recipient to be displayed in its own table row (<tr>):

<tr *ngFor="let r of recipients.recipients | split-recipients">
  <td>{{r}}</td>
  <td style="width: 60px"><button (click)="_delete(r, recipients)">REMOVE</button></td>
</tr>

If you want all recipients to be kept within the same <td> element:

<td id="recipients">
  <div style="display:flex;justify-content:space-between;width:100%;" 
       *ngFor="let r of recipients.recipients | split-recipients">
    <span>{{r}}</span>
    <button (click)="_delete(r, recipients)">REMOVE</button>
  </div>
</td>

Regarding the _delete method, written in the ts file:

/**
 * It's important to note that recipients refers to the object containing 
 *   the list of recipient strings, not the string itself.
 */
_delete(emailToDelete: string, recipients: any) {
  const newRecipients = recipients.recipients
        .split(',')
        .filter(Boolean)
        .map(r => r.trim())
        .filter(r => r !== emailToDelete)
        .join(',');

  recipients.recipients = newRecipients;
}

Answer 2

To begin, my recommendation is to construct a pipe that will divide the recipients:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'split-recipients'})
export class SplitRecipientsPipe implements PipeTransform {
  transform(recipients: string[]) {
    return recipients
        .split(',')
        .filter(Boolean)
        .map(r => r.trim());
  }
}

If you prefer each recipient to be displayed in its own table row (<tr>):

<tr *ngFor="let r of recipients.recipients | split-recipients">
  <td>{{r}}</td>
  <td style="width: 60px"><button (click)="_delete(r, recipients)">REMOVE</button></td>
</tr>

If you want all recipients to be kept within the same <td> element:

<td id="recipients">
  <div style="display:flex;justify-content:space-between;width:100%;" 
       *ngFor="let r of recipients.recipients | split-recipients">
    <span>{{r}}</span>
    <button (click)="_delete(r, recipients)">REMOVE</button>
  </div>
</td>

Regarding the _delete method, written in the ts file:

/**
 * It's important to note that recipients refers to the object containing 
 *   the list of recipient strings, not the string itself.
 */
_delete(emailToDelete: string, recipients: any) {
  const newRecipients = recipients.recipients
        .split(',')
        .filter(Boolean)
        .map(r => r.trim())
        .filter(r => r !== emailToDelete)
        .join(',');

  recipients.recipients = newRecipients;
}

Answer 3

Answer №2

#recipients {
   white-space: pre-line;
}

Essentially, this inquiry mirrors the one found at Angular 4 display in next line for newline character for p tag

Answer 4

#recipients {
   white-space: pre-line;
}

Essentially, this inquiry mirrors the one found at Angular 4 display in next line for newline character for p tag

Answer 5

Answer №3

To split your recipients.recipients, you can use the .split() method by specifying the delimiter as ,. After splitting, you can utilize Angular's ngFor attribute to iterate through and render the array.

const recipientsArray = recipients.recipients.split(',')

<td *ngFor="let recipient of recipientsArray">
{{recipient }}
</td>

Answer 6

To split your recipients.recipients, you can use the .split() method by specifying the delimiter as ,. After splitting, you can utilize Angular's ngFor attribute to iterate through and render the array.

const recipientsArray = recipients.recipients.split(',')

<td *ngFor="let recipient of recipientsArray">
{{recipient }}
</td>

Answer 7

Answer №4

Utilize the split("\n") method to separate the string by a newline, then implement a ngFor loop.

class A {
  getSelectedRecipients(event) {
    this.aliasesService.getRecipients(event.nr).subscribe(
      (res) => {
        this.recipients = res.recipients.split("\n");
        this.isVisible = true;
      },
      (err) => console.error(err)
    );
  }
}

<td id="recipients" *ngFor="let recipient of recipients">
{{recipient}}
</td>

Revise the example for the logic:

const recipients = [
  "user1",
  "user2",
  "user3",
  "user4",
]
let deletedUsers = []
const deleteUser = (user) => deletedUsers.push(user)

const listUsers = () => {
  return recipients.filter(user => deletedUsers.indexOf(user) === -1)
}
console.log(listUsers()) // [ 'user1', 'user2', 'user3', 'user4' ]
deleteUser("user2")
console.log(listUsers()) // [ 'user1', 'user3', 'user4' ]

Answer 8

Utilize the split("\n") method to separate the string by a newline, then implement a ngFor loop.

class A {
  getSelectedRecipients(event) {
    this.aliasesService.getRecipients(event.nr).subscribe(
      (res) => {
        this.recipients = res.recipients.split("\n");
        this.isVisible = true;
      },
      (err) => console.error(err)
    );
  }
}

<td id="recipients" *ngFor="let recipient of recipients">
{{recipient}}
</td>

Revise the example for the logic:

const recipients = [
  "user1",
  "user2",
  "user3",
  "user4",
]
let deletedUsers = []
const deleteUser = (user) => deletedUsers.push(user)

const listUsers = () => {
  return recipients.filter(user => deletedUsers.indexOf(user) === -1)
}
console.log(listUsers()) // [ 'user1', 'user2', 'user3', 'user4' ]
deleteUser("user2")
console.log(listUsers()) // [ 'user1', 'user3', 'user4' ]

Is there a way to extract data from a single line?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The navigation bar options are not collapsing as intended

Unable to execute the 'getElementsByTagName' function as null value is passed as the parameter

Issue with displaying entire object using Jest and console.dir

Using Directives inside a Standalone Component in Angular: A Step-by-Step Guide

Take away the dropdown selection once the form has been submitted

The background size does not adjust to the size of the viewport

Creating an overlay with CSS hover on a separate element and the ::before pseudo class

Launching a program through a web browser - a step-by-step guide

Shine a spotlight on elements that match with jQuery using live() or on()

What is the best way to refresh the slick jQuery plugin for sliders and carousels?

Updating the light and OrbitControls in three.js

Receiving a JSON object in response after sending data to a server using JavaScript

Violation of content security policy due to the usage of inline styling in the tawk.to

What is the best way to stop a jQuery function from applying titles extracted from the first row th's in thead's to multiple tables in a document?

Using React hooks to reset state in a reducer: step-by-step guide

Send a React component to another component as a prop

JavaScript not correctly evaluating the if condition

Trouble with Bootstrap Collapse feature not collapsing on its own

Retrieve the jQuery widget instance by selecting an element within the widget

Using Laravel Blade Variables in JavaScript Code