M-S M-S - 6 months ago 9
Javascript Question

How to bind and loop the multiple array Object values in Jquery/Underscore

I have nested array objects, I am trying to loop it and bind the values properly.

My JSON has multiple same values like 128, 16 and 64 under

memQ
key.

If the values are same then I need to filter out all color values under one
128


The structure should be like this:

128 followed by
Gold
Rose Gold
Silver
Gray


Same with other values like 16 and 64.

This is what I tried:

_.each(dSkuResp.models, function(oVal, oIdx) {
_.each(oVal.variations, function(nVal, nIdx) {
if (nVal.memQ == initVal) {
colorObj = nVal.color;
} else {
initVal = nVal.memQ;
sizeObj = initVal;
}

});
});


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"
}
]
}
]
};

Answer

This will make a colors object with the memQ values as keys. Each memQ key will have an array of it's corresponding colors.

var colors = {};

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

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

console.log('colors: ' + JSON.stringify(colors));
// prints: colors: {"16":["Gold","Rose Gold","Silver","Gray"],"64":["Gold","Rose Gold","Silver","Gray"],"128":["Gold","Rose Gold","Silver","Gray"]}

updated answer for multiple models:

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);
        }
    });
});

console.log(JSON.stringify(colors));

// [{"16":["Gold","Rose Gold","Silver","Gray"],"64":["Gold","Rose Gold","Silver","Gray"],"128":["Gold","Rose Gold","Silver","Gray"]},{"16":["Purple","Maroon","Pink","Violet"],"64":["Red","Orange","Carbon","C Gray"],"128":["Blue","Green","Yellow","Black"]}]

console.log(JSON.stringify(colors[0]));
// {"16":["Gold","Rose Gold","Silver","Gray"],"64":["Gold","Rose Gold","Silver","Gray"],"128":["Gold","Rose Gold","Silver","Gray"]}

console.log(JSON.stringify(colors[1]));
// {"16":["Purple","Maroon","Pink","Violet"],"64":["Red","Orange","Carbon","C Gray"],"128":["Blue","Green","Yellow","Black"]}
Comments