API作成時気づいた点
バックエンドでカテゴリ別表示順、コンテンツ別表示順にソートしたAPIを下記のJson形式でフロントに渡した。
{
"status": 200,
"response_time": 2.195805072784424,
"message": "処理を完了しました。",
"data": {
"1:コンテンツ０１": {
"5": "コンテンツ０１_０３タイトル",
"4": "コンテンツ０１_０２タイトル",
"1": "コンテンツ０１タイトル"
},
"2:コンテンツ０２": {
"2": "コンテンツ０２タイトル"
},
"3:コンテンツ０３": {
"3": "コンテンツ０３タイトル"
}
}
}
しかし、せっかくバックエンドで表示順をソートしても、
フロントではオブジェクトだと順番通りに出てくることが保証されてないので、再びソートする必要があるらしい。
解決法
上記の理由でjavascriptで順序を持たせるには、バックエンドのAPIで数字用のkeyを用意するか、
配列かにして欲しいとことでAPIを下記に修正して渡すことに。
{
"status": 200,
"response_time": 3.044154167175293,
"message": "処理を完了しました。",
"data": [
{
"categoryOrder": 0,
"categoryId": "1",
"categoryName": "コンテンツ０１",
"contentData": [
{
"contentOrder": 0,
"contentId": 5,
"contentTitle": "コンテンツ０１_０３タイトル"
},
{
"contentOrder": 1,
"contentId": 4,
"contentTitle": "コンテンツ０１_０２タイトル"
},
{
"contentOrder": 2,
"contentId": 1,
"contentTitle": "コンテンツ０１タイトル"
}
]
},
{
"categoryOrder": 1,
"categoryId": "2",
"categoryName": "コンテンツ０２",
"contentData": [
{
"contentOrder": 0,
"contentId": 2,
"contentTitle": "コンテンツ０２タイトル"
}
]
},
{
"categoryOrder": 2,
"categoryId": "3",
"categoryName": "コンテンツ０３",
"contentData": [
{
"contentOrder": 0,
"contentId": 3,
"contentTitle": "コンテンツ０３タイトル"
}
]
}
]
}
結論：
Javascriptのオブジェクト（連想配列）はオブジェクトに代入された順番を記憶していない。
Javascriptの配列は配列に代入された順番を記憶している。