Javascript 提取对象数组中具有相同键的非重复值

我在Vue应用程序中得到了一些产品的API响应：

products = [{
    "id": 4,
    "name": "producto02",
    "image": "https://example.com/images/example.png",
    "combinactions": [{
        "id": 1,
        "price": "10.00",
        "price_antes": "10.00",
        "stock": 0,
        "color": "blanco",
        "sex": "masculino",
        "size": "42"
    }, {
        "id": 2,
        "price": "10.00",
        "price_antes": "10.00",
        "stock": 0,
        "color": "blanco",
        "sex": "masculino",
        "size": "39"
    }, {
        "id": 3,
        "price": "10.00",
        "price_antes": "10.00",
        "stock": 0,
        "color": "blanco",
        "sex": "masculino",
        "size": "39"
    }, ]
}, {
    "id": 5,
    "name": "producto",
    "image": "https://api.pre.runrunsports.com/api/imagees_productos/figura1_8.png",
    "combinactions": [{
        "id": 33,
        "price": "10.00",
        "price_antes": "10.00",
        "stock": 0,
        "size": "41",
        "sex": "masculino",
        "color": "blanco"
    }, {
        "id": 34,
        "price": "10.00",
        "price_antes": "10.00",
        "stock": 0,
        "size": "41",
        "sex": "masculino",
        "color": "azul"
    }, {
        "id": 35,
        "price": "10.00",
        "price_antes": "10.00",
        "stock": 0,
        "size": "41",
        "sex": "masculino",
        "color": "negro"
    }, {
        "id": 36,
        "price": "10.00",
        "price_antes": "10.00",
        "stock": 0,
        "size": "41",
        "sex": "masculino",
        "color": "rojo"
    }]
}]

我在使用同一个键选择非重复值时遇到问题。 我的意思是，我想为每个产品和每个属性产品提取不同的大小、颜色和性别值，将它们放在

中。然后，我需要根据用户选择的性别、颜色和大小动态获取匹配的“价格”

我现在被困在这一点上（简化代码）：

newvue({
el:“#列出示例”，
数据：{
产品：[{
id:4，
名称：“producto02”，
图像：“https://example.com/images/example.png",
心房肌：{
“颜色”：“颜色”，
“性”：“性”，
“大小”：“大小”
},
组合：[{
id:1，
价格：“10.00”，
价格保证：“10.00”，
股票：0，
颜色：“布兰科”，
性别：“男性”，
尺码：“42”
},
{
id:2，
价格：“10.00”，
价格保证：“10.00”，
股票：0，
颜色：“布兰科”，
性别：“男性”，
尺码：“39”
}, {
id:3，
价格：“10.00”，
价格保证：“10.00”，
股票：0，
颜色：“布兰科”，
性别：“男性”，
尺码：“39”
}
]
}, {
id:5，
名称：“producto”，
图像：“https://example.com/images/example.png",
心房肌：{
“颜色”：“颜色”，
“性”：“性”，
“大小”：“大小”
},
组合：[{
身份证号码：33，
价格：“10.00”，
价格保证：“10.00”，
股票：0，
尺码：“41”，
性别：“男性”，
颜色：“布兰科”
}, {
id:34，
价格：“10.00”，
价格保证：“10.00”，
股票：0，
尺码：“41”，
性别：“男性”，
颜色：“蓝色”
}, {
身份证号码：35，
价格：“10.00”，
价格保证：“10.00”，
股票：0，
尺码：“41”，
性别：“男性”，
颜色：“黑人”
}]
}],
},
方法：{
}
})

ul{
列表样式：无；
}
标题{
字体大小：20px；
边缘底部：20px；
}
.价格{
字体大小：30px；
颜色：红色；
}
挑选{
最大宽度：80px；
}

{{product.name}
选择{{atribute}}
{{组合}}
50€ 
（根据用户选择动态获取价格）

如果我正确理解您的问题，您可以使用Lodash的

uniqBy

方法轻松获得每个属性的唯一值列表：

    <select v-for="(val, attribute) in product.attributes" class="form-control">
        <option v-for="combination in uniqueValsForAttr(product.combinations, attribute)">
            {{ combination }}
        </option>
    </select>

    ...

    methods: {
        uniqueValsForAttr(combinations, attr) {
            return _.uniqBy(combinations, attr).map(item => item[attr]);
        }
    }

---

我不太清楚你想要什么。你想要一个选择框，还是三个选择框？@TKoL我想要每个阿曲布他产品一个选择框。其思想是根据数据响应API动态显示它们。在本例中，有三个属性可以获取价格。

    getPrice(product, selections) {
        const { color, sex, size } = selections;
        const combination = product.combinations.find(comb => {
            return comb.color === color && comb.sex === sex && comb.size === size;
        });
        return combination.price;
    }