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

Question

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

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

如果值相同，那么我需要过滤掉一个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;
        }
    });
});

杰森：

  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 1

这将创建一个以 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"]}