Объединить объект в массив

var groupArrays = {
    "group1" : [
        "volvo",
        "bmw",
        "audi"
    ],
    "group2" : [
        "red"
    ],
    "group3" : [
        "1991"
    ]
};

Этот объект создается после фильтрации списка автомобилей, я хотел бы создать несколько селекторов css, чтобы использовать их в javascript для отображения отфильтрованных элементов. Итак, в основном мне нужен массив с возможными селекторами, что-то вроде этого:

var selectors = [".volvo.red.1991", ".bmw.red.1991", ".audi.red.1991"];

Какой самый простой способ создать массив selectors, если количество групп неизвестно?


javascript arrays jquery javascript-objects
person halliewuud    schedule 06.03.2014    source источник
comment
Вам нужно будет показать больше данных, чтобы мы поняли, что такое шаблон группировки. Что делать, если в группе 2 или группе 3 более одного элемента? Неясно, каким будет алгоритм построения селекторов. Вы просто пытаетесь построить все возможные комбинации group1, group2 и group3?   -  person jfriend00    schedule 07.03.2014
comment
Продолжая эту мысль: что, если бы пользователь не выбрал ни одного бренда? Я не думаю, что вашу проблему можно решить элегантно с помощью нескольких вложенных циклов. Если мы рассмотрим дизайн фильтра: почему нам нужно выбрать 1991 или red три раза?   -  person Jezen Thomas    schedule 07.03.2014

Ответы (3)


arrow_upward
1
arrow_downward 

var groupArrays = {
    "group1": [
         "volvo",
         "bmw",
         "audi"
     ],
     "group2": [
         "red"
     ],
     "group3": [
         "1991"
     ]
};

var selectors = [];
var selector;

for (var g1 = 0; g1 < groupArrays.group1.length; g1++) {
    for (var g2 = 0; g2 < groupArrays.group2.length; g2++) {
        for (var g3 = 0; g3 < groupArrays.group3.length; g3++) {
            selector = "." + groupArrays.group1[g1] +
                        "." + groupArrays.group2[g2] +
                        "." + groupArrays.group3[g3];
            selectors.push(selector);
        }
    }
}

console.log(selectors);

JS-скрипт

Обновляемый код для любого количества групп

var groupArrays = {
    "group1": [
        "volvo",
        "bmw",
        "audi"
    ],
    "group2": [
        "red","green"
    ],
    "group3": [
        "1991","1992"
    ]
};

var selectors = [];
var values = [];
var ga = [];

for (var group in groupArrays) {
    ga.push(groupArrays[group]);
}

traverse(ga, 0);

console.log(selectors);

function traverse(ga, index) {
    if (index >= ga.length) {
        selectors.push("." + values.join("."));

        return;
    }

    var hold = ga[index].slice(0);
    var gacopy = ga[index];

    while(gacopy.length > 0) {
        var pickedValue = gacopy[gacopy.length - 1];
        values.push(pickedValue);
        gacopy.pop();

        traverse(ga, index + 1);

        values.splice(values.indexOf(pickedValue), 1);
    }

    ga[index] = hold;
}

JS-скрипт

person amit_g    schedule 06.03.2014
comment
Количество групп неизвестно - person halliewuud; 07.03.2014

arrow_upward
0
arrow_downward

Для этого достаточно простой серии вложенных циклов. Однако у вас могут возникнуть проблемы с классом 1991, начинающимся с цифры.

var selectors = [];
var i = groupArrays.group1.length,
    j,
    k;
while (i--) {
    j = groupArrays.group2.length;
    while (j--) {
        k = groupArrays.group3.length;
        while (k--) {
            selectors.push(
                '.' + groupArrays.group1[i] +
                '.' + groupArrays.group2[j] +
                '.' + groupArrays.group3[k]
            );
        }
    }
}
selectors; // [".audi.red.1991", ".bmw.red.1991", ".volvo.red.1991"]

Если у вас есть неизвестное количество элементов в groupArrays, вам может потребоваться for..in перебрать его и выполнить рекурсию с полученными ключами.

person Paul S.    schedule 06.03.2014
comment
Количество групп неизвестно - person halliewuud; 07.03.2014

arrow_upward
0
arrow_downward

Вы можете использовать функцию map

var selectors = [];
groupArrays["group1"].map(function(x) {
    groupArrays["group2"].map(function(y) {
        groupArrays["group3"].map(function(z) {
                    selectors.push('.' + x + '.' + y + '.' + z)})})});
person slapthelownote    schedule 06.03.2014
comment
Количество групп неизвестно - person halliewuud; 07.03.2014