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

时间：2016-05-22 04:12:37

标签： javascript jquery underscore.js

我有嵌套的数组对象，我试图循环它并正确绑定值。

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

如果值相同，那么我需要过滤掉一个128

下的所有颜色值

结构应该是这样的：

128 followed by
 Gold
 Rose Gold
 Silver
 Gray

与16和64等其他值相同。

这就是我的尝试：

_.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 个答案:

答案 0 :(得分：2)

这将使一个颜色对象以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"]}

更新了多个型号的答案：

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"]}
相关问题
最新问题