Question

I am trying to interact with a javascript api (bare in mind I have never done this before). An example of what I am attempting to work with is here:

SearchSpring.Catalog.init({
    leaveInitialResults : true,
    facets : '.leftNav',
    results : '#results',
    result_layout: 'list',
    results_per_page : 12,
    layout: 'top',
    loadCSS: false,
    filters: {
        color: ['Blue']
    },
    backgroundFilters: {
        category: ['Shirt', 'Shoes'],
        department: ['Mens']
    },
    maxFacets: 5,
    maxFacetOptions: 10,
    sortText: 'Sort By ',
    sortType: 'dropdown',
    filterText: 'Refine Search Results',
    previousText: 'Previous',
    scrollType: 'scroll',
    scrollTo: 'body',
    backgroundSortField: 'price',
    backgroundSortDir: 'desc',
    compareText: 'Compare Items',
    summaryText: 'Current Filters',
    showSummary: true,
    subSearchText: 'Subsearch:',
    showSubSearch: true,
    forwardSingle: false,
    afterResultsChange: function() { $('.pagination').hide(); },
    filterData: function(data) { console.debug(data); }
});

In the example I want to add a “backgroundFilter” to this with a value:

var cat="MyNewCategory";
cat.value="ANewValue;

How would I add this category and value to the backgroundFilters: listed above?

Answer 1

This is a very common framework initialization pattern when working with frameworks.

Your example code is passing a JavaScript Object {} as a parameter into a function () that is called init.

Taking out all definitions the pattern looks like this:

SomeFramework.frameworkFunction({});

In the above code the {} is an empty object used for initialization. There are two ways that you can work with that object in practice.

Regarding your first code snippet, you can add code into that ‘object literal’.

backgroundFilters: {
category: [‘Shirt’, ‘Shoes’],
department: [‘Mens’],
cat: [‘My value’]
},

Notice the added comma, this is an important tripping point. This may or may not fit your needs, depending on a few factors.

Regarding your second code snippet, you can apply members to JavaScript objects at runtime. What I mean is, your var cat can be added to the anonymous object-literal that is being passed in. Hard to say, but a simple concept. Here is how:

//Say this is initialized in some separate way. //There is a bug here I'll describe later.
var cat="MyNewCategory";
cat.value="ANewValue";

//Extract and name the initialization object. It is verbatim at this point.
var initObject = {
    leaveInitialResults : true,
    facets : '.leftNav',
    results : '#results',
    result_layout: 'list',
    results_per_page : 12,
    layout: 'top',
    loadCSS: false,
    filters: {
        color: ['Blue']
    },
    backgroundFilters: {
        category: ['Shirt', 'Shoes'],
        department: ['Mens']
    },
    maxFacets: 5,
    maxFacetOptions: 10,
    sortText: 'Sort By ',
    sortType: 'dropdown',
    filterText: 'Refine Search Results',
    previousText: 'Previous',
    scrollType: 'scroll',
    scrollTo: 'body',
    backgroundSortField: 'price',
    backgroundSortDir: 'desc',
    compareText: 'Compare Items',
    summaryText: 'Current Filters',
    showSummary: true,
    subSearchText: 'Subsearch:',
    showSubSearch: true,
    forwardSingle: false,
    afterResultsChange: function() { $('.pagination').hide(); },
    filterData: function(data) { console.debug(data); }
};

//Now we can add variables (and functions) dynamically at runtime.
initObject.cat = cat;

//And pass them into the framework initialization in a separated way.
SearchSpring.Catalog.init(initObject);

Now for the bug. I don’t know the solution because I do not know what it is intended to do, but I can point out what is potentially incorrect.

var cat=”MyNewCategory”;
cat.value=”ANewValue;

This code is: 1 creating a String Object called cat. 2 changing the value to a new string.
I do not think this is what you really want.

To add a new backgroundFilter, in the separated way above, it would be:

initObject.backgroundFilters.cat = ['A', 'B'];

//Line above would give you this type of definition within the initObject (at runtime):
        backgroundFilters: {
            category: ['Shirt', 'Shoes'],
            department: ['Mens'],
            cat: ['A','B']

        },

For this to work it will depend on what the framework is expecting regarding backgroundFilters.

Hope that helps.
All the best!
Nash