英文:
React - Refine - Display Json object correctly in form field
问题
以下是您要翻译的内容：
{
"id": "bb8dc1fa84d842bd82e3494f2d9b8e49_LATEST",
"status": "publish",
"version": "LATEST",
"permission_document": {
"Version": "2023-05-22",
"Statement": ["*"],
"Signature": "9434903948034389439843834900920-320-3-2024904209429049033490430--340"
}
}
您想要在React表单字段中显示'permission_document'属性，用户应该能够编辑某些字段，然后将其重新提交到后端。
这是用于显示表单的前端代码：
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>
);
};
如何以漂亮的方式显示JSON？
点击此处查看前端显示和当前显示的外观
我缺少一些前端技能来找到这个问题的解决方案。
英文:
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
答案1
得分: 1
你试图在编辑器内打印对象。
在显示之前，你必须将对象转换为字符串，像这样：
JSON.stringify(JSONobject, "", 2)
2 是缩进的空格数。
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify
英文:
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
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论