More than 5 years have passed since last update.
json-editorを使ってJSON Schemaから入力フォームを生成する処理サンプル

JavaScript
Posted at 2020-02-28
<!DOCTYPE html>
<!-- saved from url=(0034)http://jeremydorn.com/json-editor/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <title>JSON Editor Example</title>

    <!-- placeholders for the theme switcher -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <!-- <link rel="stylesheet" id="theme_stylesheet" href="./aaajsoneditor_files/bootstrap-combined.min.css"> -->
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

    <!-- <style>[class*="foundicon-"] {font-family: GeneralFoundicons;font-style: normal;}</style> -->
    <!-- <script src="./aaajsoneditor_files/jsoneditor.min.js"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/json-editor/0.7.28/jsoneditor.min.js" integrity="sha256-51+oMmpgSgS4jV5/DcGKnDHIOL6Jeie2i7ka6sPQVro=" crossorigin="anonymous"></script>
    
</head>
<body>
<div id="editor"></div>
<script>
(function() {
    var schema;
    if(!schema) {
        schema = {
            title: "Person",
            type: "object",
            properties: {
                name: {
                    type: "string",
                    description: "First and Last name",
                    minLength: 4,
                    default: "Jeremy Dorn"
                },
                age: {
                    type: "integer",
                    default: 25,
                    minimum: 18,
                    maximum: 99
                },
                favorite_color: {
                    type: "string",
                    format: "color",
                    title: "favorite color",
                    default: "#ffa500"
                },
                gender: {
                    type: "string",
                    enum: ["male", "female"]
                },
                location: {
                    type: "object",
                    title: "Location",
                    properties: {
                        city: {
                            type: "string",
                            default: "San Francisco"
                        },
                        state: {
                            type: "string",
                            default: "CA"
                        },
                        citystate: {
                            type: "string",
                            description: "This is generated automatically from the previous two fields",
                            template: "{{city}}, {{state}}",
                            watch: {
                                city: 'location.city',
                                state: 'location.state'
                            }
                        }
                    }
                },
                pets: {
                    type: "array",
                    format: "table",
                    title: "Pets",
                    uniqueItems: true,
                    items: {
                        type: "object",
                        title: "Pet",
                        properties: {
                            type: {
                                type: "string",
                                enum: ["cat","dog","bird","reptile","other"],
                                default: "dog"
                            },
                            name: {
                                type: "string"
                            }
                        }
                    },
                    default: [
                        {
                            type: "dog",
                            name: "Walter"
                        }
                    ]
                }
            }
        }
    }

    // Divs/textareas on the page
    var $editor = document.getElementById('editor');

    var jsoneditor;

    var reload = function(keep_value) {
        var startval = undefined; // TODO ここに初期値を入れる。入れないとjsonschemaの初期値となる。

        if(jsoneditor) jsoneditor.destroy();
        jsoneditor = new JSONEditor($editor,{
            schema: schema,
            startval: startval,
            theme: 'bootstrap3'
        });
    };

    //JSONEditor.defaults.options.theme = "//maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css";
    // JSONEditor.defaults.options.theme = 'bootstrap3';
    // JSONEditor.defaults.options.object_layout = 'normal';
    // JSONEditor.defaults.options.show_errors = 'interaction';

    reload();
})();
</script>

</body></html>
You get articles that match your needs
You can efficiently read back useful information
You can use dark theme
What you can do with signing up