JQuery $.each() - struggling to get key value pairs of object
<p>I have the following Object: </p>

<pre><code>var business_challenges =[{title: 'Business Challenges'}, [{digital_trans: 'Digital Transformation'}, {agile_mobile:'Agile &amp; Mobile Working always_on'},  {always_on:'Always on Infrastructure'}, {connect_protect: 'Connect &amp; Protect'}, {cost_cutting:'Cost Cutting/Maximise Investment'}, {improving_cust: 'Improving Customer Engagement'} ]];
var business_divisions = [{title: 'Business Divisions'},[{SMB:'SMB'}, {DCS:'DCS'}, {DPS:'DPS'}]];
var filters = $.merge(business_divisions, business_challenges); 
</code></pre>

<p>I am trying to loop through the object to get the key:value pairs but am struggling.  The Key value is numeric instead of the associative array key and the value is an object.  I have tried nesting another $each but this doesn't work.</p>

<p>Can anyone assist?  Do I need to change how the <strong>filters</strong> object is put together?</p>

<pre><code>var filter_html = '&lt;ul&gt;';
        //var filtersJSON = $.parseJSON(filters);
        $.each(filters, function(i, data) {
            var filter_title = data.title;  //THIS WORKS

            filter_html = filter_html+filter_title;
            $.each(data, function(key, val) {
                filter_html = filter_html+'&lt;li&gt;&lt;input type="checkbox" value="'+ key +'"&gt;'+ val.key +'&lt;/li&gt;';  //THIS DOESNT WORK

            });

        });
        filter_html = filter_html+ '&lt;/ul&gt;';


        $('#filterControls').html(filter_html);
</code></pre>