Search code examples
admin-on-rest

How to edit nested data with admin on rest?


I don't know how to handle nested data with admin on rest.

My GET request returns the full object without additional calls for filters and thumbnails (see below).

Example object:

{
  "id": "58bd633e4b77c718e63bf931",
  "title": "Project A",
  "description": "Blabla",
  "image": "https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150",
  "disable": false,
  "filters": [
    {
      "id": "58c662aa4ea73e3d4373dad7",
      "filterValue": {
        "label": "Filter value",
        "color": "#0094d8",
        "id": "58c7999162700623b4aac559"
      },
      "isMain": true
    }
  ],
  "thumbnails": [
    {
      "id": "58bfeac780021c56cc71bfac",
      "image": "http://lorempixel.com/1024/768/",
      "description": "Bla",
      "device": "desktop"
    },
    {
      "id": "58bfeacf80021c56cc71bfad",
      "image": "http://lorempixel.com/800/600/",
      "description": "Bla",
      "device": "laptop"
    }
  ]
}

My first idea was to create custom Input Components but I don't know if it's the best solution? Any ideas or examples?


Solution

  • Admin-on-rest relies on redux-form, which supports nested attributes. Just set the source of your input as the path to the nested property, with dot separator:

    <TextInput source="foo.bar" />
    

    For your filters and thumbnails, you'll have to use redux-form's <Fields> component, and create a custom input component with it.