JsonField can't resolve dot notation for source parameter

[fbigand]

What did you want to do I wanted to pass a dot notation string to JsonField component <JsonField source="source.nested" />

What did you expect I expected to have my nested component displayed correctly

What happened instead It displays "root":{}

I don't know if this a bug, a upcoming feature or a wanted behavior, but the strange thing is that I have no problem with the JsonInput component using dot notation.

[MrHertal]

Hi @fbigand thanks for reporting this bug.

It should be fixed in this new release: https://github.com/MrHertal/react-admin-json-view/releases/tag/v1.0.4

[fbigand]

Thank you for your response! I installed the new release (1.0.4), but unfortunately the problem is not solved on my side. I tested with both nested object and nested array, but none of them work (I don't know if they are handled differently).

I used this object for the test:

{
    ...
    "content": {
        "test_array": [
            1,
            2,
            3,
            4
        ],
        "test_object": {
            "test": "test"
        }
    }
}

And I called JsonField like this inside my Show view:

...
<Tab label="Content">
    <JsonField source="content.test_array" />
    <JsonField source="content.test_object" />
</Tab>
...

Both of them render an empty json.

[MrHertal]

Thanks for your response.

It would be interesting to know what your content field looks like after react-admin gets the data. Could you show the log of the record at this point? You can use a function field like this:

import { FunctionField } from 'react-admin';

<FunctionField
  label="Test"
  render={(record) => {
    console.log(record);

    return <JsonField source="content" record={record} />;
  }}
/>

I would like to know if your content field is a string like this:

content: "{"test_array":[1,2,3,4],"test_object":{"test":"test"}}"

Or if it is an already parsed nested object like this:

content:
  test_array: Array(4)
    0: 1
    1: 2
    2: 3
    3: 4
    length: 4
    __proto__: Array(0)
  test_object:
    test: "test"
    __proto__: Object
__proto__: Object

[fbigand]

The console.log displays the record that wraps the "content" attribute, and it is displayed as Javascript object.

{…}
  content: {…}
    test_array: (5) […]
      0: 0
      1: 1
      2: 2
      3: 3
      4: 4
      length: 5
      <prototype>: Array []
    test_object: {…}
      test: "test"
      <prototype>: Object { … }
    <prototype>: Object { … }
  id: 12
  title: "Some title"
  <prototype>: Object { … }

[MrHertal]

This is weird, I could not reproduce. Here is what I tried:

import { SimpleShowLayout, FunctionField } from "react-admin-json-view";
import { JsonField } from "react-admin-json-view";

<SimpleShowLayout>
  <FunctionField
    label="content.test_array"
    render={(record) => {
      const flowParams = JSON.parse(record.flowParams);
      console.log(flowParams);

      return (
        <JsonField
          source="content.test_array"
          record={{ ...record, content: flowParams }}
        />
      );
    }}
  />
  <FunctionField
    label="content.test_object"
    render={(record) => {
      const flowParams = JSON.parse(record.flowParams);
      console.log(flowParams);

      return (
        <JsonField
          source="content.test_object"
          record={{ ...record, content: flowParams }}
        />
      );
    }}
  />
</SimpleShowLayout>

On my project, flowParams field is a JSON string that has this value: {"test_array":[1,2,3,4],"test_object":{"test":"test"}}. In order to be as close as possible to your case, I parsed this value and set the result to record.content.

console.log(flowParams); is printing:

{test_array: Array(4), test_object: {…}}
  test_array: (4) [1, 2, 3, 4]
  test_object: {test: "test"}
  __proto__: Object

As a result, I got this:

Can you check the difference with your code?

Did you restart your project after upgrading this package? (sorry I have to make sure 🙂)

[fbigand]

Thank you for your last remark, because it is most probably that the package was not updated inside the docker container that is running the application. Now the problem is solved and it works perfectly. So thank you for the update.