Display nested data using `admin-on-rest`

Question

I have data in the following format -

{
  "categories": [
  {
    "id": "1",
    "code": "TESTCODE001",
    "name": "TESTCODE001",
  "subcategories": [
    {
      "id": "11",
      "code": "TESTCODE0002",
      "name": "TESTCODE0002",
      "subcategories": []
    }
  ]
}

I am not able to display subcategories. I have tried using ReferenceArrayField but I am not able to use it, as categories and subcategories are fetched from the same API. Also tried using custom component to display subcategories, this is also not possible as it shows the edit form when I click on subcategories.

The code I have written- categories.js

export const CategoryList = (props) => (
    <List title="All categories"  {...props} >
        <Datagrid>
             <TextField source="code" />
             <TextField source="name" />
             <TextField source="id" />
             <LinkToRelatedSubcategories/>
             <EditButton />
        </Datagrid>
     </List>
);

LinkToRelatedSubcategories.js

const LinkToRelatedSubcategories = ({ record, translate }) => (
    <FlatButton
        primary
        label='Subcategories'

        containerElement={<Link params={{ testvalue: "hello" }}
            to={{
                pathname: '/category/categoryId',

            }}
        />}
    />
);

Any help will be highly appreciated.

Answer 1

this is also not possible as it shows the edit form when I click on subcategories.

For the show page, you can use: /category/categoryId/show

Maybe you can use react-admin instead of admin-on-rest. Its the new version, now in release candidate mode. It has https://marmelab.com/react-admin/Fields.html#arrayfield and https://marmelab.com/react-admin/Inputs.html#arrayinput