How to map the array values to dropdown's dynamically using jquery

Question

I have an nested array, and I have multiple dropdowns created using bootstrap.

I need to append all the memQ key values to dropdown1 and on change of that memQ, the corresponding color key values should populate.

I have filtered out the array and mapped the colors to corresponding memQ, but not able to map them to the dropdown's.

In the below attached Images, on select of each 128, 64, 16 etc.., corresponding colors should populate.

This is what I am expecting:

This is what I tried:

HTML:

Dropdown 1:

<div class="col-sm-4" id="dropdown1">
    <ul class="sort-option">
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <span class="">Memory size</span>
                <i class="fa fa-chevron-down" aria-hidden="true"></i></a>
            <ul class="dropdown-menu col-sm-12">
                    <li>
                        <a href="#"></a>
                    </li>

            </ul>
        </li>
    </ul>
</div> 

Dropdown 2:

<div class="col-sm-4" id="dropdown2">
    <ul class="sort-option">
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <span class="">Color</span>
                <i class="fa fa-chevron-down" aria-hidden="true"></i></a>
            <ul class="dropdown-menu col-sm-12">
                    <li>
                        <a href="#"></a>
                    </li>

            </ul>
        </li>
    </ul>
</div> 

JSON:

var dSkuResp={"models":[{"deviceType":"Smartphone","name":"iPhone 6S","value":"iPhone 6S","variations":[{"memQ":"128","os":"iOS","color":"Gold","name":"Apple® iPhone® 6s 128GB in Gold","displayName":"iPhone 6S 128GB Gold","memU":"GB","maxValue":"335.0"},{"memQ":"128","os":"iOS","color":"Rose Gold","name":"Apple® iPhone® 6s 128GB in Rose Gold","displayName":"iPhone 6S 128GB Rose Gold","memU":"GB","maxValue":"335.0"},{"memQ":"128","os":"iOS","color":"Silver","name":"Apple® iPhone® 6s 128GB in Silver","displayName":"iPhone 6S 128GB Silver","memU":"GB","maxValue":"335.0"},{"memQ":"128","os":"iOS","color":"Gray","name":"Apple® iPhone® 6s 128GB in Space Gray","displayName":"iPhone 6S 128GB Space Gray","memU":"GB","maxValue":"335.0"},{"memQ":"16","os":"iOS","color":"Gold","name":"Apple® iPhone® 6s 16GB in Gold","displayName":"iPhone 6S 16GB Gold","memU":"GB","maxValue":"300.0"},{"memQ":"16","os":"iOS","color":"Rose Gold","name":"Apple® iPhone® 6s 16GB in Rose Gold","displayName":"iPhone 6S 16GB Rose Gold","memU":"GB","maxValue":"300.0"},{"memQ":"16","os":"iOS","color":"Silver","name":"Apple® iPhone® 6s 16GB in Silver","displayName":"iPhone 6S 16GB Silver","memU":"GB","maxValue":"300.0"},{"memQ":"16","os":"iOS","color":"Gray","name":"Apple® iPhone® 6s 16GB in Space Gray","displayName":"iPhone 6S 16GB Space Gray","maxValue":"300.0"},{"memQ":"64","os":"iOS","color":"Gold","name":"Apple® iPhone® 6s 64GB in Gold","displayName":"iPhone 6S 64GB Gold","memU":"GB","maxValue":"320.0"},{"memQ":"64","os":"iOS","color":"Rose Gold","name":"Apple® iPhone® 6s 64GB in Rose Gold","displayName":"iPhone 6S 64GB Rose Gold","memU":"GB","maxValue":"320.0"},{"memQ":"64","os":"iOS","color":"Silver","name":"Apple® iPhone® 6s 64GB in Silver","displayName":"iPhone 6S 64GB Silver","memU":"GB","maxValue":"320.0"},{"memQ":"64","os":"iOS","color":"Gray","name":"Apple® iPhone® 6s 64GB in Space Gray","displayName":"iPhone 6S 64GB Space Gray","memU":"GB","maxValue":"320.0"}]},{"deviceType":"Smartphone","name":"iPhone 6S","value":"iPhone 6S","variations":[{"memQ":"128","os":"iOS","color":"Blue","name":"Apple® iPhone® 6s 128GB in Gold","displayName":"iPhone 6S 128GB Gold","memU":"GB","maxValue":"335.0"},{"memQ":"128","os":"iOS","color":"Green","name":"Apple® iPhone® 6s 128GB in Rose Gold","displayName":"iPhone 6S 128GB Rose Gold","memU":"GB","maxValue":"335.0"},{"memQ":"128","os":"iOS","color":"Yellow","name":"Apple® iPhone® 6s 128GB in Silver","displayName":"iPhone 6S 128GB Silver","memU":"GB","maxValue":"335.0"},{"memQ":"128","os":"iOS","color":"Black","name":"Apple® iPhone® 6s 128GB in Space Gray","displayName":"iPhone 6S 128GB Space Gray","memU":"GB","maxValue":"335.0"},{"memQ":"16","os":"iOS","color":"Purple","name":"Apple® iPhone® 6s 16GB in Gold","displayName":"iPhone 6S 16GB Gold","memU":"GB","maxValue":"300.0"},{"memQ":"16","os":"iOS","color":"Maroon","name":"Apple® iPhone® 6s 16GB in Rose Gold","displayName":"iPhone 6S 16GB Rose Gold","memU":"GB","maxValue":"300.0"},{"memQ":"16","os":"iOS","color":"Pink","name":"Apple® iPhone® 6s 16GB in Silver","displayName":"iPhone 6S 16GB Silver","memU":"GB","maxValue":"300.0"},{"memQ":"16","os":"iOS","color":"Violet","name":"Apple® iPhone® 6s 16GB in Space Gray","displayName":"iPhone 6S 16GB Space Gray","maxValue":"300.0"},{"memQ":"64","os":"iOS","color":"Red","name":"Apple® iPhone® 6s 64GB in Gold","displayName":"iPhone 6S 64GB Gold","memU":"GB","maxValue":"320.0"},{"memQ":"64","os":"iOS","color":"Orange","name":"Apple® iPhone® 6s 64GB in Rose Gold","displayName":"iPhone 6S 64GB Rose Gold","memU":"GB","maxValue":"320.0"},{"memQ":"64","os":"iOS","color":"Carbon","name":"Apple® iPhone® 6s 64GB in Silver","displayName":"iPhone 6S 64GB Silver","memU":"GB","maxValue":"320.0"},{"memQ":"64","os":"iOS","color":"C Gray","name":"Apple® iPhone® 6s 64GB in Space Gray","displayName":"iPhone 6S 64GB Space Gray","memU":"GB","maxValue":"320.0"}]}]};

JS:

var colors = [];

_.each(dSkuResp.models, function(oVal, oIdx) {
    colors.push({});
    _.each(oVal.variations, function(nVal, nIdx) {
        if (!colors[colors.length - 1][nVal.memQ]) {
          colors[colors.length - 1][nVal.memQ] = [];
        }

        if (_.indexOf(colors[colors.length - 1][nVal.memQ], nVal.color) === -1) {
          colors[colors.length - 1][nVal.memQ].push(nVal.color);
        }
    });
});