1

all, This is my first question here, so I hope I'm phrasing it correctly and providing enough information with which to work.

I have a key in local storage called faveGifs, which has several items stored in it, each of which is an object. I want to be able to delete these objects individually. So far, I can delete the first object, the one at position 0. I want to be able to delete them at whichever index they are at, like position 2 for example. I know I have to get the indexes of each of the objects so I can achieve this, however, when I run the key through indexOf(), the only indexes I get is -1.

Here is how my localstorage key looks:

faveGifs[
  {id: 'jijijoj',rating: 'g'}, 
  {id: 'iojiojoi',rating: 'r'}, 
  {id: 'eawfe',rating: 'pg'}, 
  {id: 'ewfewfwe',rating: 'g'}, 
  {id: 'ewfewfew',rating: 'r'}
];

Here is my code:

$(document).on("click", "#remove", function () {
  let faveGifs = JSON.parse(localStorage.getItem("faveGifs"));
  let faveGif = faveGifs.map(faveGif => faveGif.id);

  //Neither of the following has worked for me:

  //let index = faveGif.indexOf(faveGif);
  //let index = faveGif.indexOf(faveGifs);
  console.log(index);

  // faveGifs.splice(index, 1);
  // localStorage.setItem("faveGifs", JSON.stringify(faveGifs));
  // populateFaves();
});

I have tried using solutions from similar questions, but none of them have worked for me. The ones I have tried are:

Remove a specific item from localstorage with js

Remove json object in localstorage using js

How do I remove an object from an array with JavaScript?

And several others, but like I said, none of them have worked for me.

Many thanks to anyone and everyone who helps me.

Jack Bashford
  • 43,180
  • 11
  • 50
  • 79
Holger Mueller
  • 372
  • 1
  • 6
  • 16

3 Answers3

1

The issue is that faveGif is still an array - it would look like this:

faveGif = ['jijijoj', 'iojiojoi', 'eawfe', 'ewfewfwe', 'ewfewfew'];

So if you want to find the index of a certain ID (let's say ewfewfew):

let index = faveGif.findIndex(id => id == "ewfewfew");

This would be the same index as in faveGifs, so it would give you the required result.

Demonstration:

let faveGifs = [{
  id: 'jijijoj',
  rating: 'g'
}, {
  id: 'iojiojoi',
  rating: 'r'
}, {
  id: 'eawfe',
  rating: 'pg'
}, {
  id: 'ewfewfwe',
  rating: 'g'
}, {
  id: 'ewfewfew',
  rating: 'r'
}];

let faveGif = faveGifs.map(faveGif => faveGif.id);

let index = faveGif.findIndex(id => id == "ewfewfew");

console.log(index); //Should return 4
Jack Bashford
  • 43,180
  • 11
  • 50
  • 79
0

To get index of element in array you can use Array.prototype.findIndex()

Code:

const data = [
  {id: 'jijijoj',rating: 'g'}, 
  {id: 'iojiojoi',rating: 'r'}, 
  {id: 'eawfe',rating: 'pg'}, 
  {id: 'ewfewfwe',rating: 'g'}, 
  {id: 'ewfewfew',rating: 'r'}
];

// get index of element with id `iojiojoi`
const index = data.findIndex(item => item.id === 'iojiojoi');

console.log(index);
Yosvel Quintero
  • 18,669
  • 5
  • 37
  • 46
0

I believe what is going on is that you are attempting to parse a string, as if it were JSON.

Check out this post: Storing Objects in HTML5 localStorage. The OP was attempting to solve a similar problem.

eppineda
  • 667
  • 3
  • 19