javascript - 将已排序的对象除以 4 以将它们列在 col-md-3 中

Question

给出按首字母排序的城市对象列表。我需要将它们分成数组内的 4 个数组，以便将它们列在 col-md-3 中的 4 行中。

我现在有这个代码:

<div class="container">
        <div class="row">
            <div class="col-md-3 col-sm-3" v-for="data, index in sortedCities">
                <ul>
                    <li>{{ index }}</li>
                    <li v-for="city in data">{{ city.name }}</li>
                </ul>
            </div>
        </div>
    </div>

并使用计算属性进行排序:

computed: {
        sortedCities() {
            var newCities = {}

            for (var i = 0; i < this.cities.length; i++) {
                var c = this.cities[i].name[0].toUpperCase()

                if (newCities[c] && newCities[c].length >= 0)
                    newCities[c].push(this.cities[i]);
                else {
                    newCities[c] = [];
                    newCities[c].push(this.cities[i]);
                }
            }

            return newCities
        }
    }

请帮助制作 4 行，每行 24 行，并进行排序，如果排序的项目以某个字母结尾，则新行必须以该字母继续。抱歉我的英语)

这是一个样板:https://jsfiddle.net/3p3goy6u/

第一组元素中的 2 个组以字母 B 结尾并在第二组中继续的示例:

[
    "firstGroup": [
        "A": [{
            id: 1,
            slug: "abakan",
            name: "Абакан"
        }, {
            id: 4,
            slug: "almetevsk",
            name: "Альметьевск"
        }, ],
        "B": [{
            id: 11,
            slug: "barnaul",
            name: "Барнаул"
        }, {
            id: 13,
            slug: "belgorod",
            name: "Белгород"
        }, ]
    ],

    "secondGroup": [
        "B": [{
            id: 19,
            slug: "bryansk",
            name: "Брянск"
        }, ]
    ]
]

Answer 1

我仍然不明白你想在这里实现什么，但根据你的预期输出，它可以通过做这样的事情来实现。

var cities = [{"id": 1, "slug": "abakan", "name": "Абакан"}, {"id": 4, "slug": "almetevsk", "name": "Альметьевск"}, {"id": 5, "slug": "armavir", "name": "Армавир"}, {"id": 7, "slug": "arhangelsk", "name": "Архангельск"}, {"id": 10, "slug": "astrahan", "name": "Астрахань"}, {"id": 11, "slug": "barnaul", "name": "Барнаул"}, {"id": 13, "slug": "belgorod", "name": "Белгород"}, {"id": 14, "slug": "biysk", "name": "Бийск"}, {"id": 16, "slug": "blagoveshchensk", "name": "Благовещенск"}, {"id": 17, "slug": "bratsk", "name": "Братск"}, {"id": 19, "slug": "bryansk", "name": "Брянск"}, {"id": 21, "slug": "velikiy-novgorod", "name": "Великий Новгород"}, {"id": 22, "slug": "vladivostok", "name": "Владивосток"}, {"id": 24, "slug": "vladimir", "name": "Владимир"}, {"id": 26, "slug": "volgograd", "name": "Волгоград"}, {"id": 29, "slug": "vologda", "name": "Вологда"}, {"id": 30, "slug": "voronezh", "name": "Воронеж"}, {"id": 32, "slug": "gorno-altaysk", "name": "Горно-Алтайск"}, {"id": 33, "slug": "ekaterinburg", "name": "Екатеринбург"}, {"id": 41, "slug": "ivanovo", "name": "Иваново"}, {"id": 43, "slug": "izhevsk", "name": "Ижевск"}, {"id": 44, "slug": "irkutsk", "name": "Иркутск"}, {"id": 47, "slug": "yoshkar-ola", "name": "Йошкар-Ола"}, {"id": 48, "slug": "kavkazskie-mineralnye-vody", "name": "Кавказские Минеральные Воды"}, {"id": 55, "slug": "kazan", "name": "Казань"}, {"id": 59, "slug": "kaliningrad", "name": "Калининград"}, {"id": 68, "slug": "kaluga", "name": "Калуга"}, {"id": 69, "slug": "kamensk-uralskiy", "name": "Каменск-Уральский"}, {"id": 70, "slug": "kemerovo", "name": "Кемерово"}, {"id": 71, "slug": "kirov", "name": "Киров"}, {"id": 72, "slug": "komsomolsk-na-amure", "name": "Комсомольск-на-Амуре"}, {"id": 74, "slug": "kostroma", "name": "Кострома"}, {"id": 75, "slug": "krasnodar", "name": "Краснодар"}, {"id": 76, "slug": "krasnoyarsk", "name": "Красноярск"}, {"id": 80, "slug": "kurgan", "name": "Курган"}, {"id": 81, "slug": "kursk", "name": "Курск"}, {"id": 82, "slug": "leninsk-kuzneckiy", "name": "Ленинск-Кузнецкий"}, {"id": 87, "slug": "lipeck", "name": "Липецк"}, {"id": 88, "slug": "magnitogorsk", "name": "Магнитогорск"}, {"id": 90, "slug": "mahachkala", "name": "Махачкала"}, {"id": 92, "slug": "miass-i-zlatoust", "name": "Миасс и Златоуст"}, {"id": 94, "slug": "moskva", "name": "Москва"}, {"id": 147, "slug": "murmansk", "name": "Мурманск"}, {"id": 149, "slug": "naberezhnye-chelny", "name": "Набережные Челны"}, {"id": 152, "slug": "nahodka", "name": "Находка"}, {"id": 153, "slug": "nizhnevartovsk", "name": "Нижневартовск"}, {"id": 155, "slug": "nizhniy-novgorod", "name": "Нижний Новгород"}, {"id": 160, "slug": "nizhniy-tagil", "name": "Нижний Тагил"}, {"id": 161, "slug": "novokuzneck", "name": "Новокузнецк"}, {"id": 166, "slug": "novorossiysk", "name": "Новороссийск"}, {"id": 171, "slug": "novosibirsk", "name": "Новосибирск"}, {"id": 177, "slug": "norilsk", "name": "Норильск"}, {"id": 179, "slug": "noyabrsk", "name": "Ноябрьск"}, {"id": 181, "slug": "omsk", "name": "Омск"}, {"id": 182, "slug": "orenburg", "name": "Оренбург"}, {"id": 183, "slug": "orel", "name": "Орёл"}, {"id": 184, "slug": "penza", "name": "Пенза"}, {"id": 186, "slug": "perm", "name": "Пермь"}, {"id": 188, "slug": "petrozavodsk", "name": "Петрозаводск"}, {"id": 189, "slug": "petropavlovsk-kamchatskiy", "name": "Петропавловск-Камчатский"}, {"id": 192, "slug": "pskov", "name": "Псков"}, {"id": 193, "slug": "rostov-na-donu", "name": "Ростов-на-Дону"}, {"id": 197, "slug": "ryazan", "name": "Рязань"}, {"id": 199, "slug": "samara", "name": "Самара"}, {"id": 201, "slug": "sankt-peterburg", "name": "Санкт-Петербург"}, {"id": 210, "slug": "saransk", "name": "Саранск"}, {"id": 212, "slug": "saratov", "name": "Саратов"}, {"id": 214, "slug": "smolensk", "name": "Смоленск"}, {"id": 215, "slug": "sochi", "name": "Сочи"}, {"id": 217, "slug": "stavropol", "name": "Ставрополь"}, {"id": 219, "slug": "staryy-oskol", "name": "Старый Оскол"}, {"id": 220, "slug": "sterlitamak", "name": "Стерлитамак"}, {"id": 223, "slug": "surgut", "name": "Сургут"}, {"id": 225, "slug": "syktyvkar", "name": "Сыктывкар"}, {"id": 226, "slug": "tambov", "name": "Тамбов"}, {"id": 228, "slug": "tver", "name": "Тверь"}, {"id": 229, "slug": "tobolsk", "name": "Тобольск"}, {"id": 230, "slug": "tolyatti", "name": "Тольятти"}, {"id": 232, "slug": "tomsk", "name": "Томск"}, {"id": 233, "slug": "tula", "name": "Тула"}, {"id": 242, "slug": "tyumen", "name": "Тюмень"}, {"id": 245, "slug": "ulan-ude", "name": "Улан-Удэ"}, {"id": 246, "slug": "ulyanovsk", "name": "Ульяновск"}, {"id": 248, "slug": "ussuriysk", "name": "Уссурийск"}, {"id": 249, "slug": "ufa", "name": "Уфа"}, {"id": 250, "slug": "habarovsk", "name": "Хабаровск"}, {"id": 251, "slug": "cheboksary", "name": "Чебоксары"}, {"id": 253, "slug": "chelyabinsk", "name": "Челябинск"}, {"id": 255, "slug": "chita", "name": "Чита"}, {"id": 256, "slug": "yuzhno-sahalinsk", "name": "Южно-Сахалинск"}, {"id": 260, "slug": "yakutsk", "name": "Якутск"}, {"id": 261, "slug": "yaroslavl", "name": "Ярославль"}, {"id": 262, "slug": "pyatigorsk", "name": "Пятигорск"}];

var result = {},
    row = 1,
    counter = 0;

for (city of cities) {
    var initial = city.name[0].toUpperCase(),
        groupName = 'Group_' + row;

    if (!result[groupName]) {
        result[groupName] = {};
    }

    if (!result[groupName][initial]) {
        result[groupName][initial] = [];
        counter++;
    }

    result[groupName][initial].push(city);
    counter++;

    if (counter >= 23) {
        row++;
        counter = 0;
    }
}

console.log(result);

这就是您的 fiddle 中的样子.