ソートされたオブジェクトを4で割ってcol-md-3にリストします。

Question

都市オブジェクトのソートされたリストが最初の文字で与えられます。配列内の4つの配列でそれらを4行にcol-md-3でリストするためにそれらを分割する必要があります。

私は今、このコードを持っている：

<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ともソート項目がで終了した場合にソートしてください。一部の文字の新しい行はその文字で続行する必要があります。私の英語のため申し訳ありませんが）、ここで

が定型である：2つの文字Bで終わる最初のグループ要素内のグループと、第2に続くとhttps://jsfiddle.net/3p3goy6u/

例：

[ 
    "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でどのように見えるかです。