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

Question

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

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

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

下的所有 color 值

结构应该是这样的：

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&reg; iPhone&reg; 6s 128GB in Gold",
          "displayName": "iPhone 6S 128GB Gold",
          "memU": "GB",
          "maxValue": "335.0"
        },
        {
          "memQ": "128",
          "os": "iOS",
          "color": "Rose Gold",
          "name": "Apple&reg; iPhone&reg; 6s 128GB in Rose Gold",
          "displayName": "iPhone 6S 128GB Rose Gold",
          "memU": "GB",
          "maxValue": "335.0"
        },
        {
          "memQ": "128",
          "os": "iOS",
          "color": "Silver",
          "name": "Apple&reg; iPhone&reg; 6s 128GB in Silver",
          "displayName": "iPhone 6S 128GB Silver",
          "memU": "GB",
          "maxValue": "335.0"
        },
        {
          "memQ": "128",
          "os": "iOS",
          "color": "Gray",
          "name": "Apple&reg; iPhone&reg; 6s 128GB in Space Gray",
          "displayName": "iPhone 6S 128GB Space Gray",
          "memU": "GB",
          "maxValue": "335.0"
        },
        {
          "memQ": "16",
          "os": "iOS",
          "color": "Gold",
          "name": "Apple&reg; iPhone&reg; 6s 16GB in Gold",
          "displayName": "iPhone 6S 16GB Gold",
          "memU": "GB",
          "maxValue": "300.0"
        },
        {
          "memQ": "16",
          "os": "iOS",
          "color": "Rose Gold",
          "name": "Apple&reg; iPhone&reg; 6s 16GB in Rose Gold",
          "displayName": "iPhone 6S 16GB Rose Gold",
          "memU": "GB",
          "maxValue": "300.0"
        },
        {
          "memQ": "16",
          "os": "iOS",
          "color": "Silver",
          "name": "Apple&reg; iPhone&reg; 6s 16GB in Silver",
          "displayName": "iPhone 6S 16GB Silver",
          "memU": "GB",
          "maxValue": "300.0"
        },
        {
          "memQ": "16",
          "os": "iOS",
          "color": "Gray",
          "name": "Apple&reg; iPhone&reg; 6s 16GB in Space Gray",
          "displayName": "iPhone 6S 16GB Space Gray",
          "maxValue": "300.0"
        },
        {
          "memQ": "64",
          "os": "iOS",
          "color": "Gold",
          "name": "Apple&reg; iPhone&reg; 6s 64GB in Gold",
          "displayName": "iPhone 6S 64GB Gold",
          "memU": "GB",
          "maxValue": "320.0"
        },
        {
          "memQ": "64",
          "os": "iOS",
          "color": "Rose Gold",
          "name": "Apple&reg; iPhone&reg; 6s 64GB in Rose Gold",
          "displayName": "iPhone 6S 64GB Rose Gold",
          "memU": "GB",
          "maxValue": "320.0"
        },
        {
          "memQ": "64",
          "os": "iOS",
          "color": "Silver",
          "name": "Apple&reg; iPhone&reg; 6s 64GB in Silver",
          "displayName": "iPhone 6S 64GB Silver",
          "memU": "GB",
          "maxValue": "320.0"
        },
        {
          "memQ": "64",
          "os": "iOS",
          "color": "Gray",
          "name": "Apple&reg; iPhone&reg; 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&reg; iPhone&reg; 6s 128GB in Gold",
          "displayName": "iPhone 6S 128GB Gold",
          "memU": "GB",
          "maxValue": "335.0"
        },
        {
          "memQ": "128",
          "os": "iOS",
          "color": "Green",
          "name": "Apple&reg; iPhone&reg; 6s 128GB in Rose Gold",
          "displayName": "iPhone 6S 128GB Rose Gold",
          "memU": "GB",
          "maxValue": "335.0"
        },
        {
          "memQ": "128",
          "os": "iOS",
          "color": "Yellow",
          "name": "Apple&reg; iPhone&reg; 6s 128GB in Silver",
          "displayName": "iPhone 6S 128GB Silver",
          "memU": "GB",
          "maxValue": "335.0"
        },
        {
          "memQ": "128",
          "os": "iOS",
          "color": "Black",
          "name": "Apple&reg; iPhone&reg; 6s 128GB in Space Gray",
          "displayName": "iPhone 6S 128GB Space Gray",
          "memU": "GB",
          "maxValue": "335.0"
        },
        {
          "memQ": "16",
          "os": "iOS",
          "color": "Purple",
          "name": "Apple&reg; iPhone&reg; 6s 16GB in Gold",
          "displayName": "iPhone 6S 16GB Gold",
          "memU": "GB",
          "maxValue": "300.0"
        },
        {
          "memQ": "16",
          "os": "iOS",
          "color": "Maroon",
          "name": "Apple&reg; iPhone&reg; 6s 16GB in Rose Gold",
          "displayName": "iPhone 6S 16GB Rose Gold",
          "memU": "GB",
          "maxValue": "300.0"
        },
        {
          "memQ": "16",
          "os": "iOS",
          "color": "Pink",
          "name": "Apple&reg; iPhone&reg; 6s 16GB in Silver",
          "displayName": "iPhone 6S 16GB Silver",
          "memU": "GB",
          "maxValue": "300.0"
        },
        {
          "memQ": "16",
          "os": "iOS",
          "color": "Violet",
          "name": "Apple&reg; iPhone&reg; 6s 16GB in Space Gray",
          "displayName": "iPhone 6S 16GB Space Gray",
          "maxValue": "300.0"
        },
        {
          "memQ": "64",
          "os": "iOS",
          "color": "Red",
          "name": "Apple&reg; iPhone&reg; 6s 64GB in Gold",
          "displayName": "iPhone 6S 64GB Gold",
          "memU": "GB",
          "maxValue": "320.0"
        },
        {
          "memQ": "64",
          "os": "iOS",
          "color": "Orange",
          "name": "Apple&reg; iPhone&reg; 6s 64GB in Rose Gold",
          "displayName": "iPhone 6S 64GB Rose Gold",
          "memU": "GB",
          "maxValue": "320.0"
        },
        {
          "memQ": "64",
          "os": "iOS",
          "color": "Carbon",
          "name": "Apple&reg; iPhone&reg; 6s 64GB in Silver",
          "displayName": "iPhone 6S 64GB Silver",
          "memU": "GB",
          "maxValue": "320.0"
        },
        {
          "memQ": "64",
          "os": "iOS",
          "color": "C Gray",
          "name": "Apple&reg; iPhone&reg; 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"]}

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

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

javascript

jquery

underscore.js