CODEWITHSUNDEEP
jqueryarraysglobal-variables
McB
McB

Reputation: 1232

How do I add key / value pairs to a global variable in JQuery?

I've got a program that add's a bunch of Div's to a page. I have a bunch of extra 'data-' attributes added to the divs that I later want to include in a global variable.

I basically want to set something up like this:

$.scoreArray = {
    scores: [],
    labels: []
};
$(".word").each(function (i) {
    $.scoreArray.labels.label = $(this).attr("data-label");
    $.scoreArray.labels.x = $(this).attr("data-x");
}
...

but I keep getting the error TypeError: Cannot set property 'label' of undefined

I've tried putting .label and .x as ["label"] and ["x"] but to no avail. What am I doing wrong?

Upvotes: 3

Views: 4148

Answers (3)

Russ Cam
Russ Cam

Reputation: 125508

It looks to me like you'd be better with an array of objects rather than an object with two arrays as it looks like a score should be kept tied with the label.

// are you sure you want to add this as a property on the jQuery object?
var $.scoreArray = $.map($('.word') , function(elem) { 
                       var self = $(elem);
                       return { score : self.attr("data-x"),
                                label : self.attr("data-label") };
                   });

// $.scoreArray will be an array of objects, each with a score and label property

Upvotes: 0

user113716
user113716

Reputation: 322512

It seems that $.scoreArray.labels is undefined when you try to access it.

Make sure it is defined before you try to add items to it.

As a side note, others are correct that if you're going to use named properties, you should use an object instead of an Array.

If you wanted an array of objects, do this:

$.scoreArray = {
    scores: [],
    labels: []
};
$(".word").each(function (i) {
    $.scoreArray.labels[ i ] = {};
    $.scoreArray.labels[ i ].label = $(this).attr("data-label");
    $.scoreArray.labels[ i ].x = $(this).attr("data-x");
}

or this:

$.scoreArray = {
    scores: [],
    labels: []
};
$(".word").each(function (i) {
    $.scoreArray.labels[ i ] = {label: $(this).attr("data-label"),
                                    x: $(this).attr("data-lx")
                               };
}

or perhaps an even better solution would be to use .map(). This (and the other solutions) assume you're not adding to an existing Array.

$.scoreArray.labels = $(".word").map(function (i) {
     return {label: $(this).attr("data-label"),
                 x: $(this).attr("data-lx")
            };
}).get();

Upvotes: 0

Jacob Mattison
Jacob Mattison

Reputation: 51062

Edited: I think I see what you want to do. You want the arrays to contain a bunch of objects, one for each word, which contain the attributes you're collecting. So you want something like:

$.scoreArray = {
    scores: [],
    labels: []
};
$(".word").each(function (i) {
    newLabel = {};
    newLabel.label = $(this).attr("data-label");
    newLabel.x = $(this).attr("data-x");
    $.scoreArray.labels.push(newLabel);
}

However, the error you're seeing sounds like the "global" variable you created isn't being found in the scope you're in. Is this your actual code?

Upvotes: 1

Related Questions