How to pass object/template as parameter in Javascript/jQuery

Question

I'm attempting my first forray into jQuery. I'm trying to acheive the following, though I'm not sure of the terminology so will try to explain with an example using a kind of C#/pseudocode syntax.

Say I want an (anonymous) object as parameter, looking something like:

elemParameter {
    elemId,
    arg1,
    optionalArg2
}

and I want to pass an array/collection of these objects into my function

$(document).ready(function() {
    $.myFunction(
        new { Id = "div1", Color = "blue", Animal = "dog" },
        new { Id = "div3", Color = "green" },
        new { Id = "div4", Color = "orange", Animal = "horse" }
    );
}

and then in my function, I need to access each object of the collection, something like:

(function($) {
    $.myFunction(var elemParams) {
        foreach (param in elemParams) {
            $('#' + param.Id).onclick = function() {
                this.css('background-color', param.Color);
                alert(param.Animal ?? 'no animal specified');
            }
        }
    }
}

Can someone give me a few pointers to the correct syntax for passing parameters this way? Or suggest a better way of acheiving the same if this isn't the correct way to go about things in javascript.

Answer 1

You're looking for "object literal notation." It looks like this:

{
    propertyName: propertyValue,
    propertyName2: propertyValue2
}

You don't use the new keyword with them, they're just a literal construct like strings ("foo") or numbers (42). Similarly, you have array literals:

["one", "two", "three"]

Here's your example updated:

$(document).ready(function() {
    $.myFunction(
        // <== Start an array literal with [
        [
            // <== Colons rather than equal signs
            { Id: "div1", Color: "blue", Animal: "dog" },
            { Id: "div3", Color: "green" },
            { Id: "div4", Color: "orange", Animal: "horse" }
        // End the array literal with ]
        ]
    );
}

Note that it's important not to have a trailing comma in either an object or array literal, e.g.

["one", "two", "three", ]
                      ^--- Don't do that
{foo: "bar", x: 27, }
                  ^------- Or that

The question of whether they were valid was unclear (it's clear now as of the recent 5th edition) and IE (at least) chokes on them.

---

Off-topic, but typically property names in JavaScript code are in camelCase and start with a lower case letter (so, for instance, animal rather than Animal). This is purely style, however.

Answer 2

Your syntax is just a bit off, it would look something like this:

$(function() {
  function myFunction() {
    $.each(arguments, function(i, arg) {
      $('#' + arg.Id).click(function() {
        $(this).css('background-color', arg.Color);
        alert(arg.Animal || 'no animal specified');
      });
    });
  }
  myFunction({ Id: "div1", Color: "blue", Animal: "dog" },
             { Id: "div3", Color: "green" },
             { Id: "div4", Color: "orange", Animal: "horse" });​
});

You can try a demo here, the syntax style is called JavaScript object literal notation, that's what you're googling for when looking for more info around this :)

Alternatively you can pass the objects in as an array if you want other arguments in addition to these, rather than using arguments directly.