How to remove individual object from Array in localStorage Angular

Question

I would like to add a delete an object from an array in localStorage. What I have so far deletes the entire array, not individual objects, below is my service.ts file

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class PlaylistService {

  public playlist = [];

  getPlaylist() {
    if (localStorage.getItem('playlist') == null) {
      this.playlist = [];
    } else {
      this.playlist = JSON.parse(localStorage.getItem('playlist'));
    }
  }

   deleteSongFromPlaylist(collectionId: number) {
    this.getPlaylist()
    const songIndex = this.playlist.findIndex(s => s.collectionId === collectionId)
    if (songIndex > -1) {
      this.playlist.splice(songIndex, 1)
      this.savePlaylist();
    }
  }

  savePlaylist() {
    localStorage.setItem('playlist', JSON.stringify(this.playlist));
    this.playlist = JSON.parse(localStorage.getItem('playlist'));
    console.log('Saved', this.playlist);
  }
  constructor() {
  }
}

To add an item to the array i am using the following:

component.ts

  addSongToPlaylist(itunes) {
    this.list.playlist.push(Object.assign({}, itunes));
    this.list.savePlaylist();
    console.log('Playlist - ', this.list.playlist);
  }

component.html

<div class="col-md-2 mb-5 col-lg-2 col-sm-12">
   <a target="_blank"><button type="button" class="btn btn-light btn-lg float-right"
     (click)="addSongToPlaylist(itunes)"><fa-icon [icon]="faPlus"></fa-icon>
</button></a>

playlist.ts

import { Component, OnInit } from '@angular/core';
import { PlaylistService } from '../../../services/playlist.service';
import { faSave } from '@fortawesome/free-solid-svg-icons';
import { faMinus } from '@fortawesome/free-solid-svg-icons';


@Component({
  selector: 'app-playlist-view',
  templateUrl: './playlist-view.component.html',
  styleUrls: ['./playlist-view.component.scss']
})
export class PlaylistViewComponent implements OnInit {

  faSave = faSave;
  faMinus = faMinus;
  collectionId: number;

  p: number = 1;

  constructor(private list: PlaylistService) { }

  remove() {
    this.list.deleteSongFromPlaylist(this.collectionId);
  }

  ngOnInit() {
    this.list.getPlaylist();

  }
}

playlist.html

<app-header></app-header>
<div class="container">
  <table class="table mt-3 mb-3">
    <thead class="thead-light">
      <tr>
        <th>Artwork</th>
        <th>Artist</th>
        <th>Title</th>
        <th>Genre</th>
        <th>Price</th>
        <th>Listen</th>
        <th>Edit</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let user of list.playlist | paginate: { itemsPerPage: 5, currentPage: p }">
        <td><img src="{{user.artworkUrl60}}"></td>
        <td>{{user.artist}}</td>
        <td>{{user.Name}}</td>
        <td>{{user.GenreName}}</td>
        <td>{{user.Price}}</td>
        <td><a href="{{user.collectionViewUrl}}" target="_blank">Music</a></td>

        <td><a target="_blank"><button type="button" class="btn btn-sm btn-danger"
          (click)="remove()">
          <fa-icon [icon]="faMinus">
          </fa-icon>
        </button></a></td>
      </tr>
    </tbody>
  </table>
  <div class="table-pagination mb-5">
      <pagination-controls (pageChange)="p = $event" class="my-pagination"></pagination-controls>
    </div>
</div>

<app-footer></app-footer>

do the items in the playlist have a way you can identify them? What do they look like? — bryan60
– bryan60, Commented Nov 26, 2019 at 0:20

bryan60 · Accepted Answer · 2019-11-26 00:52:03Z

1

you need to get the array and then save it again, this requires you to have a method of identifying the items in the playlist to remove.

since the songs have an collectionId property of some kind...

deleteSongFromPlaylist(collectionId: number) {
  this.getPlaylist()
  const songIndex = this.playlist.findIndex(s => s.collectionId === collectionId)
  if (songIndex > -1) {
    this.playlist.splice(songIndex, 1)
    this.savePlayList()
  }
}

calling this function will look like:

<a target="_blank"><button type="button" class="btn btn-sm btn-danger"
      (click)="remove(user.collectionId)">

remove(collectionId: number) {
  this.list.deleteSongFromPlaylist(collectionId);
}

edited Nov 26, 2019 at 0:52

answered Nov 26, 2019 at 0:24

bryan60

29.5k5 gold badges56 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Sole Over a year ago

OK, when I am trying to use this in my playlist.component.ts Im using: remove() { this.list.deleteSongFromPlaylist(this.collectionId); }. But its not working. I have declared collectionId: number; in the playlist.ts file?

bryan60 Over a year ago

stop trying to do everything so statefully, feed the collectionId you want to remove straight into the function

Sole Over a year ago

In what way? can you explain? it always asks for two arguments

bryan60 Over a year ago

can't comment on what's going wrong without seeing exactly what you're doing.

Sole Over a year ago

Code updated, I am trying to delete from the playlist component.

Collectives™ on Stack Overflow

How to remove individual object from Array in localStorage Angular

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related