0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

javascriptでオブジェクトって読み出し順番を記憶していない??

Last updated at Posted at 2019-10-30

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の配列は配列に代入された順番を記憶している。

参考サイト

0
0
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?