React - Refine - Display Json object correctly in form field

Question

I have the following json object retrieved from the backend REST API.

{
    "id": "bb8dc1fa84d842bd82e3494f2d9b8e49_LATEST",
    "status": "publish",
    "version": "LATEST",
    "permission_document": {
        "Version": "2023-05-22",
        "Statement": ["*"],
        "Signature": "9434903948034389439843834900920-320-3-2024904209429049033490430--340"
    }
}

I want to display the attribute 'permission_document' in a React form field where the user should be able to edit some fields and then resubmit it to the backend.

Im using the Refine dashboard template: https://refine.dev/ And this is the front-end code for displaying the form:

import React from "react";
import { IResourceComponentsProps } from "@refinedev/core";

import { Edit, useForm, useFileUploadState } from "@refinedev/antd";

import { Form } from "antd";

import MDEditor from "@uiw/react-md-editor";

import { IPermissionDocument } from "interfaces";

export const PermissionDocumentEdit: React.FC<IResourceComponentsProps> = () => {
    
    const { formProps, saveButtonProps } = useForm<IPermissionDocument>();
    
    return (
        <Edit saveButtonProps={{ ...saveButtonProps }}>
            <Form {...formProps} layout="vertical">
                <Form.Item
                    label="Permission Document"
                    name="permission_document"                    
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >

                <MDEditor 
                    id="permission_document" 
                    preview='edit' data-color-mode="light"                
                />
                </Form.Item>
            </Form>
        </Edit>
    );
};

How to display the json as pretty json? Check here to see how it looks on the frond end and how it is currently displayed

I lack a little bit of frond end skills to find the solution for this problem

Answer 1

you're trying to print the object inside the editor. You have to transform your object in a string before displaying it, like this:

JSON.stringify(JSONobject, "", 2)

2 is the number of spaces for indentation.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify