How do I remove commas in an array in Angular project-CodePudding

I am trying to call a list of actors from movies and in the DB I made they all have commas at the end of each string. When the array is called the content displays with 2 commas after each other and I am wondering how I can get rid of that. I have tried to use .join but don't know how to implement it into the HTML (I am new at Angular)

Here is the HTML and .ts files:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FetchApiDataService } from '../fetch-api-data.service'
import { MatDialog } from '@angular/material/dialog';
import { GenreComponent } from '../genre/genre.component';
import { DirectorComponent } from '../director/director.component';


@Component({
  selector: 'app-movie-card',
  templateUrl: './movie-card.component.html',
  styleUrls: ['./movie-card.component.css']
})
export class MovieCardComponent implements OnInit {
  movies: any[] = [];
  actors: any[] = [];
  constructor(
    public dialog: MatDialog,
    public fetchApiData: FetchApiDataService,
    public router:Router,
    ) { }

  ngOnInit(): void {
    this.getMovies();
  }

  removeCommas(): void {
    this.actors.join(' ');
  }

  getMovies(): void {
    this.fetchApiData.getAllMovies().subscribe((response: any) => {
      this.movies = response;
      console.log(this.movies);
      return this.movies;
    });
  }

  openGenreDialog(genreName: string): void {
    this.dialog.open(GenreComponent, {
      width: '280px',
      data: {
        genreName: genreName
      }
    });
  }
  openDirectorDialog(directorName: string): void {
    this.dialog.open(DirectorComponent, {
      width: '280px',
      data: {
        directorName: directorName
      }
    });
  }

}




<div style="display: flex;">
    <mat-card *ngFor="let movie of movies;" style="flex: 1 1 auto;">
        <mat-card-header>
        <mat-card-title>{{movie.Title}}</mat-card-title>
            <mat-card-subtitle>Starring: {{movie.Actors}}</mat-card-subtitle>
        </mat-card-header>
        <img src={{movie.ImagePath}} alt= {{movie.Title}} />
        <mat-card-actions>
            <button
                mat-button
                color="primary"
                (click)="openGenreDialog(movie.Genre.Name)"
            >
                Genre
            </button>
            <button
                mat-button
                color="primary"
                (click)="openDirectorDialog(movie.Director.Name)"
            >
                Director
            </button>
            <button
                mat-button
                color="primary"
            >
                Synopsis
            </button>
            <mat-icon>favorite_border</mat-icon>
        </mat-card-actions>
    </mat-card>
</div>

CodePudding user response：

You can run the map pipe and replace method in your array.

getMovies(): void {
    this.fetchApiData.getAllMovies().pipe(
        map((actor) => actor.replace(',', ''))).
        subscribe((response: any) => {
            this.movies = response;
            console.log(this.movies);
            return this.movies;
        });
}

CodePudding user response：

First of all, I will advice you to not use 'any' everywhere. It removes type checking and that can lead to issues and bugs in future.

As the returned object will be an Observable of type any[] (or Movies[] if you create a movie object with a string property named actor), you can do something like this. It will return an array of actors. For replace function, you will have to use a regexp expression to select all the commas in the value -

      getMovies() {
        this.fetchApiData
          .getAllMovies()
          .subscribe((res: any[]) => {
             this.movies = res;
             this.actors = res.map((movie: any) => movie.actor.replace(/,/g, ''));
             console.log(this.actors);
        });
      }