流れ
「JavaScriptでオブジェクトのソートってなんかメソッドあったような。。」
「なんだっけ。。」※そもそも連想配列という言葉すら忘れている
「調べてみるとソートを自分で実装しないといけないっぽいのかな？」
「SQLのorder by的なすごい便利なのあったような気がする？」
といつもなるので備忘録。
ライブラリ
https://lodash.com/docs/4.17.5
lodashというすごいメジャーなライブラリが便利です。
実装
See the Pen vue2.x orderBy by watabean (@watabean) on CodePen.
簡単に説明
lodashのインポートはこのように記述
（今回はcodePenで書いていて↓の記述はないです）
<script src="lodash.js"></script>
元データはこのような形
members: [
{ name: 'tanaka', age: 20 },
{ name: 'yamada', age: 25 },
{ name: 'watanabe', age: 29 },
{ name: 'watanabe', age: 27 },
{ name: 'watanabe', age: 25 },
{ name: 'kato', age: 27 },
{ name: 'sato', age: 27 },
]
１つのキー（name）でソートしたければ以下のような書き方。
_.orderBy(this.members, ['name'], ['asc']);
２つのキー（name, age）でソートしたければ以下のような書き方になります。
_.orderBy(this.members, ['name', 'age'], ['asc', 'asc']);
ascだと昇順、descだと降順になります。
直感的でわかりやすいと思います。
関係ない話
Vue.jsだと１系ではorderByフィルタあったけど
２系からはなくなったので自分で書くか、このようにライブラリを使う形になると思います。
結論
JavaScriptでの連想配列のソートはlodashでやると簡単でした。
ソース（codepenで見れるから不要だけど。。）
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>vue2.x orderBy</title>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css'>
</head>
<body>
<div id="app" class="container">
<h3>元データ</h3>
<ol>
<li v-for="member in members">{{ member }}</li>
</ol>
<h3>１つのキーでソート（name）</h3>
<ol>
<li v-for="member in this.getMemberOrderByName">{{ member }}</li>
</ol>
<h3>２つのキーでソート（name, age）</h3>
<ol>
<li v-for="member in this.getMemberOrderByNameAge">{{ member }}</li>
</ol>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.js'></script>
<script>
new Vue({
el: '#app',
data: {
members: [
{ name: 'tanaka', age: 20 },
{ name: 'yamada', age: 25 },
{ name: 'watanabe', age: 29 },
{ name: 'watanabe', age: 27 },
{ name: 'watanabe', age: 25 },
{ name: 'kato', age: 27 },
{ name: 'sato', age: 27 },
]
},
computed: {
getMemberOrderByName() {
return _.orderBy(this.members, ['name'], ['asc']);
},
getMemberOrderByNameAge() {
return _.orderBy(this.members, ['name', 'age'], ['asc', 'asc']);
}
}
})
</script>
</body>
</html>