Getting object out of an array of objects in JavaScript

Question

sorry I feel this is sort of a stupid question I have searched quite a bit and I cannot find my answer.

I have an array in JavaScript that I am inserting a bunch of elements. The trouble is I cannot then get the values of the elements back out, I think I am getting the property of the actual array. Below is what I am doing and what I am trying to do. Thanks in advance for the help. This is not the full traverse method, it actually does go through a bunch of times. When I previously just had an associative array items[a] it worked perfectly.

var element = { html: "", group: "" };
var array = [];

function traverse(o) {
    for (var key in o) {
        element.html = "<li class='item'>" + key + " : </li>";
        element.group = b;
        array.push(element);
    }
}

I want to print the html from each element, the issue is I get the .html from only the first element each time.

function printElements() {
    for (item in array) {
        var element = array.pop();
        console.log(element.html);
    }
}

I also tried.

function printElements() {
    for (item in array) {
        console.log(array.html);
    }
}

I want to keep the array intact, I do not want to pop and elements I just want to print them.

Answer 1

The main problem isn't to get the data out of the array, it never gets into the array in the first place.

You don't have a bunch of elements in the array, you only have one element that you change and add to the array over and over. When you put it in the array it's not copied, it's just the reference to the element that is placed in the array. You end up with an array full of references to the same single element.

Create a new element for each iteration in the loop when you populate it:

for (var key in o) {
  var element = {};
  element.html = "<li class='item'>" + key + " : </li>";
  element.group = b;
  array.push(element);
}

Answer 2

Use a simple for loop instead:

for (var i = 0; i < array.length; i++) {
    var item = array[i];
    // do stuff
}

It is unadvisable to use the nicer for loop syntaxes on arrays in JavaScript because they will iterate through all key/value pairs in the array, not just the array numeric keys. This is because arrays are objects, too, and the for...in loop syntax does not differentiate between them.

Answer 3

You're not using the iterated object, instead you are using array... change this:

function printElements() {
    for (item in array) {
        console.log(array.html);
    }
}

to this:

function printElements() {
    for (item in array) {
        console.log(array[item].html);
    }
}

jsfiddle

Answer 4

Do it this way:

var array = [];

function traverse(o) {
    for (var key in o) {
        var b = 'b'; // if that is what you have ment
        var element = {  html : "<li class='item'>" + key + " : </li>", group : b};
        array.push(element);
    }
}

function printElements() {
    for (var item=0; item<array.length; item++) {
        console.log(array[item].html);
    }
}

That's because it isn't safe to use for each in case of arrays and you should have new object for each array element. Be sure not to use delete on array elements either.