Adding server functionality to determine schema for JSON data type, some basic UI around an editor for getting JSON to determine schema from and the key/value mechanism for flat structures.

packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte

@@ -452,7 +452,10 @@
   </div>
 </ModalContent>
 <Modal bind:this={jsonSchemaModal}>
-  <JSONSchemaModal on:save={({ detail }) => console.log(detail)} />
+  <JSONSchemaModal
+    schema={field.schema}
+    on:save={({ detail }) => (field.schema = detail)}
+  />
 </Modal>
 <ConfirmDialog
   bind:this={confirmDeleteDialog}

packages/builder/src/components/backend/DataTable/modals/JSONSchemaModal.svelte

@@ -7,8 +7,10 @@
     Button,
     Input,
     Select,
+    notifications,
   } from "@budibase/bbui"
   import { onMount, createEventDispatcher } from "svelte"
+  import { post } from "builderStore/api"
 
   export let schema = {}
 
@@ -19,26 +21,32 @@
   let fieldKeys = {},
     fieldTypes = {}
   let keyValueOptions = ["String", "Number", "Boolean", "Object", "Array"]
+  let invalid = false
 
-  $: invalid = false
-
-  function onJsonUpdate({ detail }) {
-    // TODO: make request
+  async function onJsonUpdate({ detail }) {
     const input = detail.value
-    console.log(input)
-  }
-
-  function saveSchema() {
-    for (let i of Object.keys(fieldKeys)) {
-      const key = fieldKeys[i]
-      schema[key] = {
-        type: fieldTypes[i],
+    json = input
+    try {
+      // check json valid first
+      let inputJson = JSON.parse(input)
+      const response = await post("/api/tables/schema/generate", {
+        json: inputJson,
+      })
+      if (response.status !== 200) {
+        const error = (await response.text()).message
+        notifications.error(error)
+      } else {
+        schema = await response.json()
+        updateCounts()
+        invalid = false
       }
+    } catch (err) {
+      // json not currently valid
+      invalid = true
     }
-    dispatcher("save", schema)
   }
 
-  onMount(() => {
+  function updateCounts() {
     if (!schema) {
       schema = {}
     }
@@ -49,6 +57,20 @@
       i++
     }
     fieldCount = i
+  }
+
+  function saveSchema() {
+    for (let i of Object.keys(fieldKeys)) {
+      const key = fieldKeys[i]
+      schema[key] = {
+        type: fieldTypes[i],
+      }
+    }
+    dispatcher("save", schema)
+  }
+
+  onMount(() => {
+    updateCounts()
   })
 </script>
 
@@ -56,7 +78,7 @@
   title={"Key/Value Schema Editor"}
   confirmText="Save Column"
   onConfirm={saveSchema}
-  disabled={invalid}
+  bind:disabled={invalid}
   size="L"
 >
   <Tabs selected={mode} noPadding>

packages/server/src/api/controllers/table/index.js

@@ -9,6 +9,7 @@ const {
   BudibaseInternalDB,
 } = require("../../../db/utils")
 const { getTable } = require("./utils")
+const { FieldTypes } = require("../../../constants")
 
 function pickApi({ tableId, table }) {
   if (table && !tableId) {
@@ -81,6 +82,38 @@ exports.destroy = async function (ctx) {
   ctx.body = { message: `Table ${tableId} deleted.` }
 }
 
+exports.schemaGenerate = function (ctx) {
+  const { json } = ctx.request.body
+  function recurse(schemaLevel, objectLevel) {
+    for (let [key, value] of Object.entries(objectLevel)) {
+      const type = typeof value
+      // check array first, since arrays are objects
+      if (Array.isArray(value)) {
+        schemaLevel[key] = {
+          type: FieldTypes.ARRAY,
+        }
+      } else if (type === "object") {
+        schemaLevel[key] = recurse(schemaLevel[key], objectLevel)
+      } else if (type === "string") {
+        schemaLevel[key] = {
+          type: FieldTypes.STRING,
+        }
+      } else if (type === "boolean") {
+        schemaLevel[key] = {
+          type: FieldTypes.BOOLEAN,
+        }
+      } else if (type === "number") {
+        schemaLevel[key] = {
+          type: FieldTypes.NUMBER,
+        }
+      }
+    }
+    return schemaLevel
+  }
+
+  ctx.body = recurse({}, json) || {}
+}
+
 exports.bulkImport = async function (ctx) {
   const tableId = ctx.params.tableId
   await pickApi({ tableId }).bulkImport(ctx)

packages/server/src/api/routes/table.js

@@ -139,6 +139,24 @@ router
     generateSaveValidator(),
     tableController.save
   )
+  /**
+   * @api {post} /api/tables/schema/generate Generate schema from JSON
+   * @apiName Generate schema from JSON
+   * @apiGroup tables
+   * @apiPermission builder
+   * @apiDescription Given a JSON structure this will generate a nested schema that can be used for a key/value data
+   * type in a table.
+   *
+   * @apiParam (Body) {object} json The JSON structure from which a nest schema should be generated.
+   *
+   * @apiSuccess {object} schema The response body will contain the schema, which can now be used for a key/value
+   * data type.
+   */
+  .post(
+    "/api/tables/schema/generate",
+    authorized(BUILDER),
+    tableController.schemaGenerate
+  )
   /**
    * @api {post} /api/tables/csv/validate Validate a CSV for a table
    * @apiName Validate a CSV for a table