Netlify-cms: NetlifyCMS not showing JSON List

Created on 8 Oct 2019 · 3Comments · Source: netlify/netlify-cms

Describe the bug
Cannot preview JSON file in NetlifyCMS even though I can see that the API call returns the correct json file.

To Reproduce
This is my .json file:

[
 {
        "name": "Lorem ipsum #1",
        "image": {
            "main": "/assets/images/blog/name-01.jpg",
            "alt": "/assets/images/blog/name-01-alt.jpg"
        },
        "position": "Lorem ipsum",
        "bio": "Lorem ipsum",
        "background": "Lorem ipsum",
        "social": [
            {
                "name": "LinkedIn",
                "link": "https://www.linkedin.com"
            },
            {
                "name": "GitHub",
                "link": "https://github.com"
            },
            {
                "name": "Facebook",
                "link": "https://www.facebook.com"
            }
        ]
    },
    {
        "name": "Lorem ipsum #2",
        "image": {
            "main": "/assets/images/blog/name-01.jpg",
            "alt": "/assets/images/blog/name-01-alt.jpg"
        },
        "position": "Lorem ipsum",
        "bio": "Lorem ipsum",
        "background": "Lorem ipsum",
        "social": [
            {
                "name": "LinkedIn",
                "link": "https://www.linkedin.com"
            },
            {
                "name": "GitHub",
                "link": "https://github.com"
            },
            {
                "name": "Facebook",
                "link": "https://www.facebook.com"
            }
        ]
    },
]

Expected behavior

List with all the members from the JSON file

Screenshots
Screenshot 2019-10-08 at 19 13 17

Applicable Versions:

Netlify CMS version:
_netlify-cms-app 2.9.7
netlify-cms-core 2.12.2
netlify-cms 2.9.7_
Git provider: GitHub
OS: macOS Mojave 10.14.6
Browser version BraveJS Version 0.68.142 Chromium: 77.0.3865.90 (Official Build) (64-bit)
Node.JS version: 6.11.3

CMS configuration

collections:
    - name: 'team' 
      label: 'Team Members'
      label_singular: 'Team Member'
      editor:
          preview: false
      delete: false
      preview_path: 'team'
      files:
          - label: 'Members'
            name: 'members'
            file: 'data/teamMembers.json'
            fields:
                - label: Members
                  name: members
                  widget: list
                  allow_add: true
                  fields:
                      - { label: 'Name', name: 'name', widget: 'string' }
                      - label: 'Image'
                        name: 'image'
                        widget: 'object'
                        fields:
                            - { label: 'Photo', name: 'main', widget: 'image' }
                            - { label: 'Photo Alt', name: 'alt', widget: 'image' }
                      - { label: 'Position', name: 'position', widget: 'string' }
                      - { label: 'Bio', name: 'bio', widget: 'string' }
                      - { label: 'Background', name: 'background', widget: 'string' }
                      - label: 'Social'
                        name: 'social'
                        widget: 'list'
                        fields:
                            - { label: 'Name', name: 'name', widget: 'string' }
                            - { label: 'Link', name: 'link', widget: 'string' }

Source

alexcroitoru95

👍1

All 3 comments

@alexcroitoru95 Great written issue.

Unfortunately, the cms cannot handle json files that are themselves lists at the moment. You will have to change the structure of your data/teamMembers.json file to match the config.

{
  "members": [
    {
      "name": "Lorem ipsum #1",
      "image": {
        "main": "/assets/images/blog/name-01.jpg",
        "alt": "/assets/images/blog/name-01-alt.jpg"
      },
      "position": "Lorem ipsum",
      "bio": "Lorem ipsum",
      "background": "Lorem ipsum",
      "social": [
        {
          "name": "LinkedIn",
          "link": "https://www.linkedin.com"
        },
        {
          "name": "GitHub",
          "link": "https://github.com"
        },
        {
          "name": "Facebook",
          "link": "https://www.facebook.com"
        }
      ]
    },
    {
      "name": "Lorem ipsum #2",
      "image": {
        "main": "/assets/images/blog/name-01.jpg",
        "alt": "/assets/images/blog/name-01-alt.jpg"
      },
      "position": "Lorem ipsum",
      "bio": "Lorem ipsum",
      "background": "Lorem ipsum",
      "social": [
        {
          "name": "LinkedIn",
          "link": "https://www.linkedin.com"
        },
        {
          "name": "GitHub",
          "link": "https://github.com"
        },
        {
          "name": "Facebook",
          "link": "https://www.facebook.com"
        }
      ]
    }
  ]
}