vueのv-forを使ってリストの一覧を出し、名前が重複ものはまとめて表示させたい

Question

vueのv-forを使ってリストの一覧を出し、名前が重複する都市はまとめ、
さらに重複した分だけ件数を数えて表示させたいと考えております。

Jsonデータ

[
    { id:121, city: Osaka }
    { id:123, city: Fukuoka }
    { id:425, city: Osaka } 
    { id:645, city: Tokyo }
    { id:326, city: Osaka }
    { id:876, city: Tokyo }
    { id:456, city: Osaka } 
    { id:335, city: Osaka }
    { id:471, city: Tokyo }
    { id:345, city: Osaka }
    { id:857, city: Fukuoka }
    { id:455, city: Osaka }
    { id:997, city: Osaka }
    { id:121, city: Tokyo }
    { id:115, city: Osaka }
    { id:668, city: Fukuoka }      //  実際はcityの市は100種類以上ある
...
]

HTML

<ul class="item" v-for=“area in data” :key="area.id">
　　　　　//  何らかの処理
	<li>{{area.city}}</li>
</ul>

表示結果（まとめる前）
Osaka
Fukuoka 
Osaka
Osaka
Tokyo
…

やりたい表示結果（まとめた後）
Osaka(9)
Fukuoka(3)
Tokyo(4)
…

尚、cityの市の種類分フィルターリストを作成し、あらかじめHTMLにcityの市の種類分のタグを設定しておけば表示が可能と考えましたが、cityの市の種類が100以上あり下記やり方は効率的ではないと思っており、できればv-forなどで回した上でさらにリストを整形する方法があれば教えていただきたいです。

現状で考えたコード

computed: {

OsakaCount: function() {     // この処理をcityの市の種類分記載する必要あり
var newList = [];

for (var i = 0; i < this.data.length; i++) {
isShow = false;

if (this.data == 'Osaka') {
  isShow = true;
		}
	}
return newList;
  }
}

<ul >
	<li>大阪({{OsakaCount.lenght}})</li> 
	<li>福岡({{FukuokaCount.lenght}})</li> 
// HTMLにcityの市の種類分のタグをあらかじめ記載しておく必要あり
</ul>

Answer 1

const dataList = // jsonの配列

const resultList = dataList.map(function(data){ return data.city })
        .reduce(function(acc, val){ acc[val] != null ? acc[val]++ : acc[val] = 1; return acc; }, {});

で、リストを整形して

<div v-for="(v, k) in data">{{k}}({{v}})</div>

でいけますでしょうか？

Comments

[tomato01]

ご回答ありがとうございます。

教えて頂いた方法で思ったような動作になりました！
mapとreduceの使い方関して、私はまだあまり理解していない状態なのでさらに勉強してみたいと思います。ありがとうございます。

参考（動作したコード）
<div id="app">
<div v-for="(v, k) in resultList">{{k}}({{v}})</div>
</div>
<script>
var dataList = [
{ id: 121, city: "Osaka" },
{ id: 123, city: "Fukuoka" },
{ id: 425, city: "Osaka" },
{ id: 645, city: "Tokyo" },
{ id: 326, city: "Osaka" },
{ id: 876, city: "Tokyo" },
{ id: 456, city: "Osaka" },
{ id: 335, city: "Osaka" },
{ id: 471, city: "Tokyo" },
{ id: 345, city: "Osaka" },
{ id: 857, city: "Fukuoka" },
{ id: 455, city: "Osaka" },
{ id: 997, city: "Osaka" },
{ id: 121, city: "Tokyo" },
{ id: 115, city: "Osaka" },
{ id: 668, city: "Fukuoka" }
];
console.log(dataList);
const resultList = dataList
.map(function(data) {
return data.city;
})
.reduce(function(acc, val) {
acc[val] != null ? acc[val]++ : (acc[val] = 1);
return acc;
}, {});

var vm = new Vue({
el: "#app",
data: {
resultList: resultList
}
});
</script>

[tomato01]

すいません、もし可能でしたらmapとreduceでのプロセスを簡単に伺えますでしょうか。

[q_sane_q]

mapは配列から要素を置き換えた別の配列をつくる処理です
この場合jsonの配列の1要素（data）をその中のcity（data.city）で置き換えた配列を作っています
つまりdataListをもとにした文字列配列的なものができています

reduceは複雑でいろいろなことができるのですが
今回の処理でいうとまず最後の「{}」が「acc」の初期値になります、つまりaccは空の連想配列としてスタートします
で、配列の要素は1つずつvalに入って処理されていきますのでacc["Osaka"]、acc["Tokyo"]などを見ていることになります
存在していたら値にプラス1、存在していなかったら1で初期化をする操作をして、操作後のaccをreturnしています

ちなみに実は今回の処理はmapの処理なしでも書くことができます
reduceだけにして、acc[val]をacc[val.city]にしても動くはずです
個人的にreduceの中で何回もval.cityって書くのが好みでなかっただけなので実際にはこちらでも問題無いと思います

[tomato01]

とても丁寧な解説を頂きありがとうございます！
reduceの処理については、とても色々なことができそうと感じましたので調べてみたいと思います。

ありがとうございました。