Question

How do I get the options from another set of options.

JS Fiddle Example
at the moment this is outputting the name of each option in opt.social. Instead I want it to fetch the actual HTML related to each option name.

Thus the idea is that in the future when a new social media site is built, this can easily be added via the plugin options without the need to edit the plugin.

Example:

$.each(opt.social, function(index, value) {
  html += "<li>" + value.name + "</li>";
});

I have tried

opt[value.name];
opt.value.name;
opt(value.name);

Full example:

(function ($) {

$.fn.socialMedia = function (options) {

    // default configuration properties
    var defaults = {
        social: [
             { name: "facebook.like_large"},
             { name: "twitter.large"},
             { name: "googlePlus.large"}
        ],
        facebook: {
            like_large: '<div class="fb-like" data-href="{url}" data-send="false" data-layout="box_count" data-width="120" data-show-faces="false"></div>',
            like_small: '<div class="fb-like" data-href="{url}" data-send="false" data-layout="button_count" data-width="120" data-show-faces="false" data-colorscheme="dark"></div>',
            share: '<a name="fb_share" type="box_count" share_url="{url}" href="http://www.facebook.com/sharer.php?u={url}&t={title}">Share</a>'
        },
        twitter: {
            large: '<a href="http://twitter.com/share" class="twitter-share-button" data-url="{url}" data-count="vertical">Tweet</a>',
            small: '<a href="http://twitter.com/share" class="twitter-share-button" data-url="{url}">Tweet</a>'
        },
        googlePlus: {
            large: '<div class="g-plusone" data-size="tall" data-href="{url}"></div>',
            small: '<div class="g-plusone" data-size="medium" data-annotation="inline" data-width="120" data-href="{url}"></div>'            
        }
    };

    var opt = jQuery.extend(defaults, options);

    // Generate HTML
    $(this).append(generateHtml());

    function generateHtml() {            
        var html = '<ul>';

        $.each(opt.social, function(index, value) {
            html += "<li>" + value.name + "</li>";
        });

        html += '</ul>';            
        return html;
    }
}

  $("body").socialMedia();  

})(jQuery);

Answer 1

In that code, opt.social is an array of objects, each with a “name” property.

Thus,

var firstOptName = opt.social[0].name;

And so on. The opt.social array should be indexed numerically. Now, opt.googlePlus is just an object with (in this case) two properties, so there’s no array indexing involved:

var googleLarge = opt.googlePlus.large;

edit — if you want to just alter that loop to show the HTML:

$.each(opt.social, function(index, value) {
  var parts = value.name.split('.'), partVal = opts;
  for (var i = 0; i < parts.length; ++i)
    partVal = partVal[parts[i]];
  html += "<li>" + partVal + "</li>";
});

The trick is that those “name” properties are in the form of dotted “paths” through an object graph, and JavaScript does not have a built-in way of interpreting those. The code I wrote above walks through the object part by part (parts are separated by “.” characters), starting from the outer “opts” object.