Json key randomize order after save ?

[hotrungnhan]

Link to reproduction

Update later

To Reproduce

1. Add a collection field as json

{
            name: "ui_schema",
            label: "UI Schema",
            type: 'json',
            required: true,
            admin: {
                editorOptions: {
                    language: 'json',
                }
            },
            defaultValue: {}
        },

2. Save some json to that field.

Describe the Bug

My expectation is keep the json schema the same as we type, without changing the order.
It will be better if we have a flag to disable behavious.

Payload Version

1.15.2

[JessChowdhury]

My expectation is keep the json schema the same as we type, without changing the order.

Can you provide more detail here? Is the JSON data itself changing 'order'? If you could include screenshots of what you are seeing / what you would expect, that would be super helpful.

[jmikrut]

Hey @hotrungnhan — unfortunately because we save JSON, and not a string, in the database, keys within JSON have no inherent way of ordering themselves and there's nothing we can do to enforce their key order.

This is a limitation of object properties in both JS and in JSON which Payload can't do much about.

Sorry about the hassle here!

[hotrungnhan]

Hey @hotrungnhan — unfortunately because we save JSON, and not a string, in the database, keys within JSON have no inherent way of ordering themselves and there's nothing we can do to enforce their key order.

This is a limitation of object properties in both JS and in JSON which Payload can't do much about.

Sorry about the hassle here!

Luckily Mongodb have preserse the order.
So we just need to replace the object implement with another one that will keep the order in both backend and admin page. I've seen many implement of it here.
https://www.npmjs.com/package/json-order.
@jmikrut
@JessChowdhury

[jmikrut]

Hmmmm very interesting! good find!

Would you be willing to implement that package as a PR? We would happily accept that! Good find!

This file is where it would need to be leveraged (you can see that we JSON.parse and JSON.stringify in this file):

https://github.com/payloadcms/payload/blob/main/packages/payload/src/admin/components/forms/field-types/JSON/index.tsx

[hotrungnhan]

Hmmmm very interesting! good find!

Would you be willing to implement that package as a PR? We would happily accept that! Good find!

This file is where it would need to be leveraged (you can see that we JSON.parse and JSON.stringify in this file):

https://github.com/payloadcms/payload/blob/main/packages/payload/src/admin/components/forms/field-types/JSON/index.tsx

Can you reopen the issue. I gonna try this weekend

[jmikrut]

Yes, but I'll convert this to a feature request discussion and add it to a roadmap to more accurately reflect its nature.

THANK YOU!!!