Pass JSON into jQuery plugin

Question

I'm trying to figure out how to pass in settings to an animation plugin in the following format (I know it's bad to expect users to jump in and play with settings like this, but I'll be building a GUI to go alongside it as well):

   $('#animationContainer').plugin({
      'path':[
            {'path_on_x':[ // PATH_ON X IS AN ARRAY
                {'0':'0px','1':'0px','2':'0px'}, // object 1 starting X values (0,1,2)
                {'0':'0px','1':'0px','2':'0px'}, // object 2 starting X values (0,1,2)
                {'0':'150px','1':'150px','2':'150px'} // object 3 starting X values...
            ]},
            {'path_off_x':[ // PATH_ON X IS AN ARRAY
                {'0':'0px','1':'0px','2':'0px'},
                {'0':'0px','1':'0px','2':'0px'},
                {'0':'150px','1':'150px','2':'150px'}
            ]},
            {'path_on_y':[ // PATH_ON Y IS AN ARRAY
                {'0':'0px','1':'0px','2':'0px'},
                {'0':'0px','1':'0px','2':'0px'},
                {'0':'0px','1':'50px','2':'200px'}
            ]},
            {'path_off_y':[ // PATH_ON Y IS AN ARRAY
                {'0':'0px','1':'0px','2':'0px'},
                {'0':'0px','1':'0px','2':'0px'},
                {'0':'200px','1':'50px','2':'0px'}
            ]}
        ]
     });

This code is currently setup within the plugin and I'm referencing all of the static values. "PATH" contains all of the settings related to animating the object along a path. The path_on_x, path_off_x, path_on_y and path_off_y all contain specific sets of coordinate values for animating from point 0 to point 1 to point 2, etc.

Each set of coordinates inside the arrays contain values specific to different objects being animated. (NOTED in CODE ABOVE)

I'm used to doing the typical defaults= .... code and just merging that with the user options, but how would I go about setting up defaults (or some other kind of fallback setting) in this case? I'm pretty sure the standard defaults = ... code isn't going to cut it, and simply using the above code in place of the defaults doesn't account for the fact that there may be 20 objects being animated instead of 3 shown above.

Any suggestions? Thanks!

Tomalak · Accepted Answer · 2012-04-10 05:46:38Z

2

I would suggest such a format:

$('#animationContainer').plugin({
  "path": [
    {
      "x": [[0, 0, 0], [0, 0, 0]],
      "y": [[0, 0, 0], [0, 0, 0]]
    },
    {
      "x": [[0, 0, 0], [0, 0, 0]],
      "y": [[0, 0, 0], [0, 0, 0]]
    },
    {
      "x": [[150, 150, 150], [150, 150, 150]],
      "y": [[0, 50, 200], [200, 50, 200]]
    }
  ]
});

This way you have properties that belong to one object in one place, instead of having them evenly distributed. It's much easier to understand, too. (BTW, the "path" property itself looks like a good candidate for integrating into the individual objects instead of keeping it top-level.)

Accessing the properties would be straight-forward:

options.path[0].x[0] // starting values
options.path[0].x[1] // stopping values

and applying defaults to them becomes easy to. All it needs is a for loop

for(var i=0; i<options.path.length; i++) {
  // merge options.path[i] with default values, e.g. via $.extend()
}

edited Apr 10, 2012 at 5:46

answered Apr 10, 2012 at 5:41

Tomalak

339k68 gold badges547 silver badges635 bronze badges

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

2 Comments

Aaron Over a year ago

Ok, this looks really promising and a much better structure than what I was working with. :) I have a couple questions: How would I go about accessing the second starting x coordinate point for the first object? Would it just be options.path[0].x[0][1]? And when setting up the defaults I just create the same object, but only use 1 group of settings (path": [ { "x": [[0], [0]], "y": [[0], [0]]} .... and the other arrays will merge in ok? Thanks a mil! :)

Tomalak Over a year ago

@Aaron: I'm pretty sure you'll figure out the array indexes on your own ;) Depending on how you define "merge" and what values are optional... I'd write a small function that takes the settings for one object (i.e. the options.path[i]) and checks each property, filling in the missing values. jQuery's $.extend would only create x if it was missing entirely, but not intelligently fill up the individual arrays.

Muhammad Raheel · Accepted Answer · 2012-04-10 05:40:20Z

0

You can pass json into your plugin and then convert json to your requirements. There is no need to use this json format in the plugin. Instead you can loop and use if conditions easily. By the way here is a little tool that might help you.

http://code.google.com/p/jquery-json/

answered Apr 10, 2012 at 5:40

Muhammad Raheel

19.9k7 gold badges69 silver badges106 bronze badges

Collectives™ on Stack Overflow

Pass JSON into jQuery plugin

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related