CODEWITHSUNDEEP
javascriptjsonlocal-storage
phurst-so
phurst-so

Reputation: 386

JS: Multiple objects in an array stored in local storage

I've been trying to do this all day and just can't get it right. I've read many articles on various websites and tried many different approaches, but I am still getting issues of one kind or another.

Sorry if it's a little haphazard, I'm struggling to see my issue and so I'm struggling on what area to ask for help.

Component aim: Array stored on LS that holds objects, that hold information on shows Component issue: Depending on the code I seem to either be overwritting a single object, cant log more than 2 objects (that then overwrite each other) or after storing 1 object fine the array starts messing up with more entries.

TLDR:

All I'm trying to do at this point is:

-push new object onto new showList array

-pull my objects from a showList array in LS (if exists), push into new showList

-stringify, then push my new combine array into LS

Below is the relative function.

function addNewShow(titleArg, typeArg, genreArg, watchedArg) {
  var showList = [];

  var show = {
    title: titleArg,
    type: typeArg,
    genre: genreArg,
    watched: watchedArg
  };
  showList.push(show);
  showList.push(JSON.parse(localStorage.getItem('showList')));
  console.log(showList);


  localStorage.setItem("showList", JSON.stringify(showList));
};

If you'd prefer to see the project you can see that here: https://codepen.io/11PH/pen/NONJBa?editors=1011

Any help much appreciated, thank you in advance.

Upvotes: 0

Views: 6161

Answers (3)

Barmar
Barmar

Reputation: 781716

You should read showList from localStorage first, then push show onto that array.

function addNewShow(titleArg, typeArg, genreArg, watchedArg) {
  // Get array from local storage, defaulting to empty array if it's not yet set
  var showList = JSON.parse(localStorage.getItem('showList') || "[]");

  var show = {
    title: titleArg,
    type: typeArg,
    genre: genreArg,
    watched: watchedArg
  };
  showList.push(show);
  localStorage.setItem("showList", JSON.stringify(showList));
};

Upvotes: 3

agsigma
agsigma

Reputation: 331

You are pushing entire array received from local storage into second position of local showList array, you should use array concatenation:

localStorage.removeItem('showList');

function addNewShow(titleArg, typeArg, genreArg, watchedArg) {
  var showList = [];

  var show = {
    title: titleArg,
    type: typeArg,
    genre: genreArg,
    watched: watchedArg
  };
  showList.push(show);
  showList = showList.concat(JSON.parse(localStorage.getItem('showList')||'[]'));
  console.log(showList);


  localStorage.setItem("showList", JSON.stringify(showList));
};

addNewShow(1,2,3,4);
addNewShow(1,2,3,5);
addNewShow(1,2,3,6);
addNewShow(1,2,3,7);

Little snippet showing why (jsonString||"[]") is important:

var array = [1,2,3,4];
console.log("array is:");
console.log("\t",  array ); 
console.log("concating null adds new null element to the array");
console.log("\t",  array.concat(null) ); 
console.log("concating empty array deosn't change anything");
console.log("\t",  array.concat([]) );
console.log("result of expresion (null||[]) is empty array not null");
console.log("\t", null||[]);
console.log("puting it all together, if we don't want to add null to the array then we can write   array.concat( null||[] )");
console.log("\t",  array.concat( null||[] ) ); 

console.log('additionaly JSON.parse(null) in null');
console.log("\t",  JSON.parse(null) );

Array.concat just works that way - MDN is great source of documentation and examples - here for concat.

Upvotes: 5

Saurabh Yadav
Saurabh Yadav

Reputation: 3386

first check for localstorage, then you can use spread operator for iteration

  function addNewShow(titleArg, typeArg, genreArg, watchedArg) {
  var showList = [];

  var show = {
    title: titleArg,
    type: typeArg,
    genre: genreArg,
    watched: watchedArg
  };
  showList.push(show);
  var finalArr = localStorage.getItem('showList') != undefined ? [...showList, ...JSON.parse(localStorage.getItem('showList'))] : showList;
  localStorage.setItem("showList", JSON.stringify(finalArr));
};

Upvotes: 0

Related Questions