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.

Using for-in on arrays can cause bugs in JavaScript.

silly little me
– silly little me

2013-04-23 16:23:58 +00:00
Commented Apr 23, 2013 at 16:23 — silly little me
– silly little me, Commented Apr 23, 2013 at 16:23

Guffa · Accepted Answer · 2013-04-23 16:22:49Z

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);
}

answered Apr 23, 2013 at 16:22

Guffa

703k111 gold badges760 silver badges1k bronze badges

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

1 Comment

recneps Over a year ago

Turns, out this was my problem. when printing the array I kept getting the same value so I thought I was just accessing the property of the array not the object in it. Turns out I was just not actually not creating a new element. Thanks for seeing it and thanks for your help.

Alexis King · Accepted Answer · 2013-04-23 16:19:52Z

0

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.

answered Apr 23, 2013 at 16:19

Alexis King

44.1k17 gold badges144 silver badges218 bronze badges

Comments

Gabe · Accepted Answer · 2013-04-23 16:25:33Z

0

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

edited Apr 23, 2013 at 16:25

answered Apr 23, 2013 at 16:20

Gabe

50.6k29 gold badges147 silver badges182 bronze badges

1 Comment

ulentini Over a year ago

item contains the key, not the value. It should be array[item].html

Saša · Accepted Answer · 2013-04-23 16:43:54Z

0

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.

answered Apr 23, 2013 at 16:43

Saša

4,8821 gold badge30 silver badges43 bronze badges

Collectives™ on Stack Overflow

Getting object out of an array of objects in JavaScript

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related