Why do I get empty objects when pushing to array?

Question

I have the following snippet:

var options = [];
$("tr.mks-option-row").each(function (row) {
    options.push({
        Id: $(row).data("option-id"),
        CategoryId: $(row).data("category-id"),
        Value: $(row).data("option-text")
    });
});

Where .mks-option-row is the selector for all the rows in a table. The table contains several elements of data, which I have also repeated as data-attributes on the tr itself.

However, when this snippet is done, the options array contains n empty object literals. If there are 4 rows in the table the array contains [{},{},{},{}]

What am I doing wrong here? (I have also tried using quoted identifiers with no difference in outcome)

This is not possible. Even if the data wasn't being found, you'd be getting { Id: undefined, CategoryId: undefined, Value: undefined }. Are you checking the output using JSON.stringify? That might explain it. Please post how you are getting [{},{},{},{}], and also post an example HTML which lets us reconstruct your result. — Amadan
– Amadan, Commented Oct 19, 2016 at 6:19
syntax of $.each is $.each(index, element). Just rectify it. — Rajesh Dixit
– Rajesh Dixit, Commented Oct 19, 2016 at 6:22

KAD · Accepted Answer · 2016-10-19 06:25:34Z

3

the row is passed as the element index in the list of rows to the callback function, you need to use this in order to fetch the row as jquery object:

var options = [];
$("tr.mks-option-row").each(function () {
    options.push({
        Id: $(this).data("option-id"),
        CategoryId: $(this).data("category-id"),
        Value: $(this).data("option-text")
    });
});

Update:

More specifically, $.each expects function(index, element). this is one option; ignoring the first argument is another.

$("tr.mks-option-row").each(function (row, element) {
     options.push({
         Id: $(element).data("option-id"),
         CategoryId: $(element).data("category-id"),
         Value: $(element).data("option-text")
     });
});

edited Oct 19, 2016 at 6:25

answered Oct 19, 2016 at 6:17

KAD

11.2k4 gold badges34 silver badges75 bronze badges

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

3 Comments

Amadan Over a year ago

More specifically, $.each expects function(index, element). this is one option; ignoring the first argument is another.

Christian Wattengård Over a year ago

Now I just feel like a fool... I should know this, but in the heat of the moment it escaped me. And I don't like to use this too much because I feel like I can't control it. However, if you edit your answer to use function (idx, row) { I'll give it to you. The element is passed as the second parameter and index as the first. Your answer put me on the right track...

Christian Wattengård Over a year ago

@Amadan: But you're right. It still doesn't explain why I didn't just get the objects with undefined as each property's value or something like that...

Collectives™ on Stack Overflow

Why do I get empty objects when pushing to array?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related