JavaScriptで、プロパティ値をもとにオブジェクトをソートしたい

Question

前提・実現したいこと

あるサービスのAPIを叩くと、以下のようなレスポンスが返ってきます。

{
    "hoge": {
        "val": "val1",
        "index": 1
    },
    "piyo": {
        "val": "val3",
        "index": 3
    },
    "fuga": {
        "val": "val5",
        "index": 5
    },
    "foo": {
        "val": "val2",
        "index": 2
    },
    "bar": {
        "val": "val4",
        "index": 4
    }
}

毎回順番がランダムで取得されるので、indexプロパティの昇順でソートしたいです。

試したこと

配列を用意し、indexの値をそのまま配列の添字に設定することで、ソート自体は出来ました。

ただし、２回ループしないといけないので書き方がダサいのと、keyの値が欲しくなった時に別途考慮しないといけないので、もう少しスマートな書き方があれば教えてください。

var apiResult = {...}; // 上記のオブジェクト

// 並び替え後の配列
var sortedArray = [];

// 並び替える
for (var key in apiResult) {
    // sortedArrayの添字にindexプロパティ値を設定
    sortedArray[apiResult[key]["index"]] = apiResult[key];
}

//確認
console.log(sortedArray);
// 1:{ val: "val1", index: 1 }
// 2:{ val: "val2", index: 2 }
// 3:{ val: "val3", index: 3 }
// 4:{ val: "val4", index: 4 }
// 5:{ val: "val5", index: 5 }

// 出力
for (var i = 1; i < sortedArray.length; i++) {
    console.log(sortedArray[i].val);
}

Answer 1

{} のプロパティに順番はない

{} が持つプロパティに順番という概念はありません。
順番に意味があるなら、配列や new Map のようなiterableなオブジェクトが必要です。

new Map(Object.entries(object).sort(function (a, b) {
  // ソート処理
}));

クロスブラウザはPolyfillで対応して下さい。

Map.prototype.sort

一度、定義した new Map を再ソートする方法が標準で用意されていない為、再ソートには工夫が必要です。
https://gist.github.com/think49/daaf5ee0a4f12092862c81c54747bae5

Re: tamogi さん

Answer 2

こういうのは使う直前で用意するものです。
そしてJavaScriptにはメソッドチェーンで値を加工することが出来るので、
ObjectやArrayに紐づくメソッドをしっかり覚えれば数行で終わります。

例えば「indexプロパティの昇順でソート」されたものを画面表示するならばこう。

var apiResult = {
  hoge: {val: "val1", index: 1},
  piyo: {val: "val3", index: 3},
  fuga: {val: "val5", index: 5},
  foo: {val: "val2", index: 2},
  bar: {val: "val4", index: 4}
};

Object.values(apiResult)
  .sort((a, b) => a.index - b.index)
  .forEach(it => console.log(it.val));
// val1, val2, val3, val4, val5の順に出力

---

また、初期状態でkey: valueのオブジェクトになっていますが、
JS側からは使いにくいケースがありますので、
下記の様にオブジェクトの配列に変換して記憶させておくのも良いかもしれませんね。

この辺は一長一短なのでどちらで持つかは実装と好みみたいなもんです。
key: "hoge"で検索する頻度が高くなければ、
MySQLなんかのRDBは基本的に2次元の表形式なのでオブジェクトの配列として持っておくと分かりやすいかと思います。

var apiResult = {
  hoge: {val: "val1", index: 1},
  piyo: {val: "val3", index: 3},
  fuga: {val: "val5", index: 5},
  foo: {val: "val2", index: 2},
  bar: {val: "val4", index: 4}
};

var newResult = Object.keys(apiResult)
  .sort((a, b) => apiResult[a].index - apiResult[b].index)
  .map(key => ({key, ...apiResult[key]}));
console.log(newResult);
// [
//   {key: "hoge", val: "val1", index: 1},
//   {key: "foo", val: "val2", index: 2},
//   {key: "piyo", val: "val3", index: 3},
//   {key: "bar", val: "val4", index: 4},
//   {key: "fuga", val: "val5", index: 5}
// ]

// key: piyoを得たい
console.log(newResult.find(it => it.key === 'piyo'));
// {key: "piyo", val: "val3", index: 3}

Answer 3

こんにちは。

ソート後のデータ構造をどのように持つのか、用途によっていろいろ考えられそうですが、一例としてこの回答では、元のJSONから以下のような形のオブジェクト

{ key: "hoge", val:"val1", index:1 }

を要素とする配列を、

• Object.entries()
• Array.prototype.map()

によって作成し、これを index の値の昇順になるように、

• Array.prototype.sort()

を使ってソートします。以下がそのコードです。

const jsonString = `{
    "hoge": {
        "val": "val1",
        "index": 1
    },
    "piyo": {
        "val": "val3",
        "index": 3
    },
    "fuga": {
        "val": "val5",
        "index": 5
    },
    "foo": {
        "val": "val2",
        "index": 2
    },
    "bar": {
        "val": "val4",
        "index": 4
    }
}`;

const dataObj = JSON.parse(jsonString);

const sortedAry = 
    Object.entries(dataObj)
           .map(([key, data]) => ({ key, ...data }))
           .sort((e1, e2) => e1.index - e2.index );
  
console.log(JSON.stringify(sortedAry, null, "\t"));

※上記のコードと同じものを、https://jsfiddle.net/jun68ykt/g956j2fn/39/ にも上げました。

これを実行すると、以下が出力されます。

[
	{
		"key": "hoge",
		"val": "val1",
		"index": 1
	},
	{
		"key": "foo",
		"val": "val2",
		"index": 2
	},
	{
		"key": "piyo",
		"val": "val3",
		"index": 3
	},
	{
		"key": "bar",
		"val": "val4",
		"index": 4
	},
	{
		"key": "fuga",
		"val": "val5",
		"index": 5
	}
]

以上参考になれば幸いです。

---

補足

プレーンオブジェクトのプロパティに順序がないことについては、以下の投稿で確認されるとよいかと思います。

• Does JavaScript Guarantee Object Property Order? (stackoverflow)

上記、質問の回答の中で一番得票の多い回答 では、 ECMAScript Third Edition (pdf) からの引用で、以下が書かれています。

4.3.3 Object

An object is a member of the type Object. It is an unordered collection of properties each of which contains a primitive value, object, or function. A function stored in a property of an object is called a method.

---

補足2

think49さんがご回答で、og24715さんがコメントで、それぞれご提案されている Map を使ったコードを示します。for ... of を使ったときに、index の値の昇順に内容を列挙するようなMapオブジェクトを作成するには、以下のようにします。

const sortedEntriesByIndex = Object.entries(dataObj).sort(([key1, data1], [key2, data2]) => data1.index - data2.index);
  
const map = new Map(sortedEntriesByIndex);
  

上記のサンプル： https://jsfiddle.net/jun68ykt/jug198we/3/

Answer 4

https://teratail.com/questions/135351

Comments

[tamogi]

結局１回は配列にしないといけないということですね。

[yambejp]

> １回は配列にしないといけない

いえ、順番を持っているのは配列だけで、オブジェクトの要素に
順番をつけることはできないということです

[og24715]

ちなみに、Map オブジェクトの key も順番持ってます。

> The keys in Map are ordered while keys added to object are not.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map#Objects_and_maps_compared