如何在Jquery / Underscore中绑定和循环多个数组的Object值

时间:2022-09-25 08:07:03

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.

我的JSON在memQ键下有多个相同的值,如128,16和64。

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

如果值相同,那么我需要过滤掉一个128下的所有颜色值

The structure should be like this:

结构应该是这样的:

128 followed by
 Gold
 Rose Gold
 Silver
 Gray

Same with other values like 16 and 64.

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

1 个解决方案

#1


2  

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

这将生成一个带有memQ值作为键的颜色对象。每个memQ键都有一个相应颜色的数组。

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

#1


2  

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

这将生成一个带有memQ值作为键的颜色对象。每个memQ键都有一个相应颜色的数组。

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