looping through object array returns 'undefined'

Question

I have two arrays.

var fruits = [];

var tasks = [];

When I enter a value in the text field it fires a function that pushes the value to an array. It then fires a separate function that stringifies the array and saves it in local storage. ("when" is my alias for document.addeventlistener).

when(toDo, "keypress", function(event){
  if (event.key == "Enter" || event.keyCode == 13) {
    pushArray();
    stringifyArray(fruits);
    toDo.value = "";
  }
});

// function that adds new task to the array
function pushArray(){
  var newtask = new Task(toDo.value, "No note yet");
  fruits.push(newtask);  
}

// function that stringifies given array and stores it in local storage
    function stringifyArray(array){
      var makeString = JSON.stringify(array);
      var setItem = localStorage.setItem("tasks", makeString);
    }

When I loop through the first array and try to display object.Name and .Note in a div it works fine:

when(button, "click", function(event){
  demolist.innerHTML = "";
   for(i=0; i< fruits.length; i++){
     demolist.innerHTML += fruits[i].Name + " " + fruits[i].Note + "<br>";
   }
});

But when I fire a function that parses that array, populates the second and tries to loop through it in the same manner I get "undefined undefined" even though I can see that the array contains all the objects I submitted when I check the console.

function parseArray(){
  var getArray = localStorage.getItem("tasks");
  var parseObj = JSON.parse(getArray);
  tasks.push(parseObj);
}



 when(button2, "click", function(event){
function parseArray()
      demolist2.innerHTML = "";
       for(i=0; i< tasks.length; i++){
         demolist2.innerHTML += tasks[i].Name + " " + tasks[i].Note + "<br>";
       }
    });

https://jsfiddle.net/bjxs3LdL/ (NO JQUERY SOLUTIONS PLEASE)

I am new to coding and stackoverflow so forgive the long post.

Cameron · Accepted Answer · 2016-02-03 19:34:24Z

1

Fix your parseArray() function by changing

tasks.push(parseObj);

to

tasks = parseObj;

EDIT: Sorry for all the edits, it's hard to wrap my around the control flow. To fix the issue of the first note not getting saved, add a stringifyArray(fruits); call to the end of your submitNote() function.

edited Feb 3, 2016 at 19:34

answered Feb 3, 2016 at 19:07

Cameron

4342 silver badges4 bronze badges

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

2 Comments

codemon Over a year ago

Thanks, that did help a bit but it only shows the first note? I know the code must look like crap but a) I am learning to code in the first place. b) in trying to add local storage functionality in order to learn how it works I've made a mess because I still can't wrap my head around how to do what I want: as basic todo app that stores tasks in local storage and displays them, and updates notes added to each task in localstorage..so I've been trying to do this edit by edit. Also, c) when done I will clean it up and submit it to code review for proper critique on how to improve my code :)

codemon Over a year ago

Ah I see you edited it. Thanks that worked! I guess the way I was doing it pushed an array as a single object into another array. So stupid of me. Been trying to work this out for days now!!

Ivan Cézanne · Accepted Answer · 2016-02-03 18:46:09Z

0

The parseArray call is wrong, try rewiriting button2 listener like this:

when(button2, "click", function(event){
      parseArray();
      demolist2.innerHTML = "";
       for(i=0; i< tasks.length; i++){
         demolist2.innerHTML += tasks[i].Name + " " + tasks[i].Note + "<br>";
       }
    });

Otherwise, your code needs a redesign, but that's for another opportunity.

answered Feb 3, 2016 at 18:46

Ivan Cézanne

781 silver badge11 bronze badges

2 Comments

codemon Over a year ago

? I believe you reposted the code exactly as I wrote it. And yes when I'm done getting the functionality I want out of this I will post it to code review for tips on how to write better code, thanks.

Ivan Cézanne Over a year ago

Nah, I've changed the parseArray() call. But, fine, that was not the case. Glad someone clarified your doubt!

Collectives™ on Stack Overflow

looping through object array returns 'undefined'

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related