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