For loop not working with js map function

Question

I am trying to print array in html, but my for loop is not working. I am trying to get the length of dataArrayNew but its not returning back where my for loop is added. If i console.log(dataArrayNew.title); , I am able to see the correct result. I am also attaching the print screen of my browser console.

var dataArrayNew = [];

function fetch_section_data_1(){

var keys = Object.keys(localStorage).filter(function(key) {
  return /^section\d+$/.test(key);
});

var dataArray = keys.map(function(key) {
    dataArrayNew = JSON.parse(localStorage.getItem(key));   
    console.log(dataArrayNew.title);
    //lengtharray = dataArrayNew.length;
    //console.log(lengtharray);
    //return JSON.parse(localStorage.getItem(key));
});

var $table = $( "<table></table>" );
for(i=0;i<dataArrayNew.length;i++){
    var array_no = dataArrayNew[i];
    var $line = $( "<tr></tr>" );
    $line.append( $( "<td></td>" ).html( array_no.title ) );
    $table.append( $line );
    console.log(dataArrayNew.title);
}

$table.appendTo(document.body);

}

Your .map() callback doesn't have a return statement. It should. Add console.log(dataArray) after the .map() and you'll see why. — nnnnnn
– nnnnnn, Commented May 17, 2017 at 3:01
i uncommented my return statement and added what you suggested, i can see this in my console - https://www.dropbox.com/s/nexj0maebb3xm35/Screenshot%202017-05-17%2008.36.13.png?dl=0 but still for loop not working — user2828442
– user2828442, Commented May 17, 2017 at 3:06
ok it worked , if i click on the title, how can i get its corresponding id from array, please suggest — user2828442
– user2828442, Commented May 17, 2017 at 3:09

Mμ. · Accepted Answer · 2017-05-17 03:33:00Z

1

The reason why you cannot see the length property is because you are reassigning dataArrayNew from an array to a result JSON.parse which is an object, and objects do not have the property length. Instead of reassigning the value of dataArrayNew, why don't you push the value of JSON.parse(localStorage.getItem(key)) to it, like so:

dataArrayNew.push(JSON.parse(localStorage.getItem(key)));

So your code should look something like this:

var dataArrayNew = [];

function fetch_section_data_1(){

  var keys = Object.keys(localStorage).filter(function(key) {
    return /^section\d+$/.test(key);
  });

  var dataArray = keys.map(function(key) {
    var currIn = JSON.parse(localStorage.getItem(key));   
    console.log(currIn);
    // push data to dataArrayNew
    dataArrayNew.push(currIn);
    //lengtharray = dataArrayNew.length;
    //console.log(lengtharray);
     //return JSON.parse(localStorage.getItem(key));
  });

  var $table = $( "<table></table>" );
  
  // You should be able to get the length here now
  for(var i = 0; i < dataArrayNew.length; i++){
      var array_no = dataArrayNew[i];
      var $line = $( "<tr></tr>" );
      $line.append( $( "<td></td>" ).html( array_no.title ) );
      $table.append( $line );
      console.log(dataArrayNew.title);
  }

  $table.appendTo(document.body);

}

answered May 17, 2017 at 3:33

Mμ.

8,5723 gold badges28 silver badges36 bronze badges

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

4 Comments

user2828442 Over a year ago

Yeah I did something similar, I just used dataArray itself after the map function, how can I console.log the id of the title I clicked

Mμ. Over a year ago

In that case, it would be console.log(currIn.title)

user2828442 Over a year ago

How to add click on title to get corresponding id

Mμ. Over a year ago

You probably need an event handler for that. Look up onClick on MDN: developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/…

Collectives™ on Stack Overflow

For loop not working with js map function

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related