Passing JSON array values as JQuery selectors

Question

I'm trying to pass JSON array values into my javascript file and use the values as selectors to call methods on corresponding html divs.

for example:

function clickEvents(items) {
for (var r = 0; r < items.length; r++) {    
    var omega = items[r].id +;

     $(omega).click(function() {
        alert('Thanks for adding item number #' + omega ' to your cart!');
    });
}

where my JSON looks like this:

 {
"Items" : [{
        "header: "apple",
        "id": 5000
      }, {
         "header": "banana",
         "id":5001
      }, {
         "header": "pear",
         "id": 5002
      }]
 }

unfortunately, its not working properly. I can't seem to get the selectors to match up. Does anyone know the proper syntax for this type of approach or have ideas for other approaches?

when i do this, it works:

function clickEvents(items) {
   $('#5001').click(function() {
      alert('hi');
   });
 }

user113716 · Accepted Answer · 2010-07-23 23:18:09Z

2

Two things.

First, you can't start an ID with a number. http://www.w3.org/TR/html4/types.html#type-id

Second, you need to concatenate the # in the selector if you are selecting using ID attribute.

Here's an example: http://jsfiddle.net/3BBtU/

function clickEvents(items) {
    for (var r = 0; r < items.length; r++) { 

          // removed the stray "+" at the end
        var omega = items[r].id;

            // If you wanted to add an attribute to each element, do it here.
        $('#' + omega).attr('someAttribute', 'some value');

            // Wrap handler assignment in a closure, passing "omega" in so that
            //      when it fires, it is referencing the correct value of "omega"
        (function(o) {
                 // concatenate "#" to the ID for a proper ID selector
             $('#' + o).click(function() {

                  // You were missing the second + operator in this concatenation
                alert('Thanks for adding item number #' + o + ' to your cart!');
             });
        })(omega);
    }
}

    // Modify IDs so that they do not start with a number
var obj = {
    "Items" : [{
            "header": "apple",
            "id": "d5000"
          }, {
             "header": "banana",
             "id": "d5001"
          }, {
             "header": "pear",
             "id": "d5002"
          }]
     };

    // call the clickEvents() passing in the Items from the obj variable
clickEvents(obj.Items);

EDIT:

Added an example
Corrected a mistake where I had functions instead of var.
Corrected one more issue. I wrapped the handler assignment in a closure because the omega variable was being used inside the handler in the concatenation in .alert(), which means that it was referencing the latest value update of omega when a click fired it.

edited Jul 23, 2010 at 23:18

answered Jul 23, 2010 at 22:23

user113716

323k64 gold badges454 silver badges441 bronze badges

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

6 Comments

Sachin Over a year ago

so the id needs to be of type string? right now they are integers

s.susini Over a year ago

A question about the first thing: start an ID with a number works; is it NOT standard?

user113716 Over a year ago

@fordays, @s.susini - Whether it is a string or an integer, it is invalid HTML to start an ID with a number. They must start with a letter. It may work in some browsers, but perhaps not in others.

Sachin Over a year ago

what about creating your own in-house attribute tag, for example: "pid": "k5001" as an element of an array. how do I refer to "pid" in a jquery selector after assignment the pid number to the html tag?

user113716 Over a year ago

@fordays - Why? If you're going to start it with "k", then it is valid for an ID. You could use your approach, but it is faster to use actual valid ID attributes for lookup. A lot faster. Note that I'm talking about the ID for the HTML elements. Those must start with a letter.

|

Dan Pettersson · Accepted Answer · 2010-07-23 22:16:28Z

0

What exactly is going wrong? You're missing a quotation mark after the last "id" in your sample, but maybe it's just a typo...(?)

answered Jul 23, 2010 at 22:16

Dan Pettersson

7731 gold badge5 silver badges18 bronze badges

1 Comment

Sachin Over a year ago

i fixed the typo, however, I need help getting the selector syntax correct when I call $(omega).click Do I need to make a change in the assignment of omega or in the selector syntax?

s.susini · Accepted Answer · 2010-07-23 22:21:38Z

0

You have to use something like: $("#"+omega). You are asking for an id, isn't it!?

function clickEvents(items) {
for (var r = 0; r < items.length; r++) {    
    var omega = items[r].id;

     $("#"+omega).click(function() {
        alert('Thanks for adding item number #' + omega ' to your cart!');
    });
}

In fact th $() function in this case thake a string the is a validCSS selector.

answered Jul 23, 2010 at 22:21

s.susini

6011 gold badge9 silver badges18 bronze badges

Collectives™ on Stack Overflow

Passing JSON array values as JQuery selectors

3 Answers 3

6 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related