Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

参考サイト

https://mimirswell.ggnet.co.jp/blog-239

kerry
自社メディアのバックエンドエンジニアです。
wiz_inc
Wizは、最新のIoTやICTサービスをお客様に届ける「ITの総合商社」です
http://012grp.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away