UI crash in collection with JSON field when data is a JSON array

[rbruels]

Describe the Bug

The collection list view crashes if the collection has a JSON field which contains an array with greater than 100 items.

The error is:

TypeError: t.substring is not a function

Link to the code that reproduces this issue

https://github.com/rbruels/payload-json-issue

Reproduction Steps

Add json field

I just added this to the default Media collection:

fields: [
    {
      name: 'alt',
      type: 'text',
      required: true,
    - }
    + },
    + {
    +  name: 'data',
    +  type: 'json',
    +  required: true,
    + }
  ],

Insert data

Insert a new Media object and add an image/alt text and then in the new data field, add a json array exceeding 100 items. You can copy paste this if you're so inclined:

[{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "},{"test":"test "}]

Save the object.

Reload the list view

Go back to the list view for media (http://localhost:3000/admin/collections/media)

You'll immediately see an error:

The problematic code is here:

https://github.com/payloadcms/payload/blob/beta/packages/ui/src/elements/Table/DefaultCell/fields/JSON/index.tsx#L11

In this case, cellData is a json array. So cellData.length > 100 is valid code ... but when the # of objects in the array exceeds 100, it calls cellData.substring which is not valid for the array.

Which area(s) are affected? (Select all that apply)

area: ui

Environment Info

Binaries:
  Node: 20.12.2
  npm: 10.5.0
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  payload: 3.0.0-beta.127
  next: 15.0.0
  @payloadcms/db-mongodb: 3.0.0-beta.127
  @payloadcms/email-nodemailer: 3.0.0-beta.127
  @payloadcms/graphql: 3.0.0-beta.127
  @payloadcms/next/utilities: 3.0.0-beta.127
  @payloadcms/payload-cloud: 3.0.0-beta.127
  @payloadcms/richtext-lexical: 3.0.0-beta.127
  @payloadcms/translations: 3.0.0-beta.127
  @payloadcms/ui/shared: 3.0.0-beta.127
  react: 19.0.0-rc-65a56d0e-20241020
  react-dom: 19.0.0-rc-65a56d0e-20241020
Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.0.0: Tue Sep 24 23:37:25 PDT 2024; root:xnu-11215.1.12~1/RELEASE_ARM64_T6030
  Available memory (MB): 36864
  Available CPU cores: 12