質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

5560閲覧

オブジェクトのキーでソートをしたい

ganariya

総合スコア50

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/09/05 13:34

前提・実現したいこと

現在、競技プログラミングのリンクを保存するクローム拡張を作成しています。
表示にはVue.jsを使用しているのですが、その表示に置いてオブジェクトのキーでソートをする必要があります。

発生している問題・エラーメッセージ

現在、ソートしたい変数は、atCoderByContestでありオブジェクト形式になっています。
キーはコンテストの名前で、値は配列であり、

javascript

1var atCoderByContest = {}; 2atCoderByContest['ABC003'] = []; 3atCoderByContest['ABC003'].push({ 4 contestName: 'ABC003', problem: 'B' 5}); 6atCoderByContest['ABC001'] = []; 7atCoderByContest['ABC001'].push({ 8 contestName: 'ABC001', problem: 'A' 9}); 10atCoderByContest['ABC001'].push({ 11 contestName: 'ABC001', problem: 'B' 12}); 13 14atCoderByContest['SOUNDHOUND'] = []; 15atCoderByContest['SOUNDHOUND'].push({ 16 contestName: 'SOUNDHOUND', problem: 'B' 17});

上記のように、値の配列にはオブジェクトを入れています。
本当は、ループなどで取得し、キーが有るかを確認しながら動作をしています。

上記の変数オブジェクトをコンテスト名ごとにVueコンポーネントを作成したいのですが、できればコンテスト名でソートした状態で、コンポーネントを表示したいと考えています。
上記の例だと、先にatCoderByContest['ABC003']を作成し、オブジェクトを格納しているため、先にABC003に関するオブジェクト達が表示されてしまいます。

変数オブジェクトのキーで、ソートをするにはどうすればよろしいでしょうか。

補足情報(FW/ツールのバージョンなど)

OS: Mac
ブラウザ: Chrome
フロントエンド: Vue.js

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

いったん別のオブジェクト作るしかないんじゃないかなーと思います。

js

1const obj = {}; 2Object.keys(atCoderByContest).sort().forEach(key => obj[key] = atCoderByContest[key]);

投稿2018/09/05 13:46

spookybird

総合スコア1803

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

オブジェクトのキーの順序は実装依存なため、Map を使うなど他の方法をお勧めします。

【オブジェクトのキーの順序 - hogehoge @teramako】
http://d.hatena.ne.jp/teramako/20140205/p1

【Javascriptにおけるオブジェクトの順序】
https://qiita.com/suguru03/items/bf48610225fefcb0f45e

【JavaScript - javascriptの{}オブジェクトのキーの順序について(106913)|teratail】
https://teratail.com/questions/106913

投稿2018/09/05 13:41

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

spookybird

2018/09/05 13:51

実装依存とは言っても、確か現在の主要モダンブラウザ(IE11含む)は、入れた順を保持してくれるように実装されていたと思います。(先頭アルファベットと先頭数字が混在したとき問題が起きたような気もしないでもない) 今後どうなるかわからないという危険性はあるといえばありますが。
kei344

2018/09/05 13:53

そのうちそういう仕様になるかもしれませんね。
maisumakun

2018/09/05 22:52

現状のChromeやFirefoxでは「整数キーだけは整数の順序で先に並ぶ」というような動作になっています。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問