code review

nicegui/elements/json_editor.js

@@ -31,14 +31,10 @@ export default {
         this.editor.destroy();
       }
     },
-    run_api_method(name, arg) {
+    run_editor_method(name, ...args) {
       if (this.editor) {
-        if (arg === null) {
-          return this.editor[name]();
-        } else {
-          this.arg = new Function("return " + arg)();
-          return this.editor[name](this.arg);
-        }
+        const evaluated_args = args.map((arg) => new Function("return " + arg)());
+        return this.editor[name](evaluated_args);
       }
     },
   },

nicegui/elements/json_editor.py

@@ -44,6 +44,20 @@ class JsonEditor(Element, component='json_editor.js', exposed_libraries=['lib/va
         super().update()
         self.run_method('update_editor')
 
-    def run_api_method(self, name: str, arg: Optional[str] = None, timeout: float = 1,
-                       check_interval: float = 0.01) -> AwaitableResponse:
-        return self.run_method('run_api_method', name, arg, timeout=timeout, check_interval=check_interval)
+    def run_editor_method(self, name: str, *args, timeout: float = 1,
+                          check_interval: float = 0.01) -> AwaitableResponse:
+        """Run a method of the JSONEditor instance.
+
+        See the `JSONEditor README <https://github.com/josdejong/svelte-jsoneditor/>`_ for a list of methods.
+
+        If the function is awaited, the result of the method call is returned.
+        Otherwise, the method is executed without waiting for a response.
+
+        :param name: name of the method
+        :param args: arguments to pass to the method
+        :param timeout: timeout in seconds (default: 1 second)
+        :param check_interval: interval in seconds to check for a response (default: 0.01 seconds)
+
+        :return: AwaitableResponse that can be awaited to get the result of the method call
+        """
+        return self.run_method('run_editor_method', name, *args, timeout=timeout, check_interval=check_interval)

website/documentation/content/json_editor_documentation.py

@@ -1,5 +1,3 @@
-from typing import Any, Dict
-
 from nicegui import ui
 
 from . import doc
@@ -20,16 +18,33 @@ def main_demo() -> None:
         'time': 1575599819000,
         'string': 'Hello World',
     }
-    editor = ui.json_editor({'content': {'json': json}},
-                            on_select=lambda e: ui.notify(f'Select: {e}'),
-                            on_change=lambda e: ui.notify(f'Change: {e}'))
-    ui.button('Expand All', on_click=lambda: editor.run_api_method('expand', 'path => true'))
-    ui.button('Collapse All', on_click=lambda: editor.run_api_method('expand', 'path => false'))
-
-    async def show_data() -> None:
-        data = await editor.run_api_method('get')
+    ui.json_editor({'content': {'json': json}},
+                   on_select=lambda e: ui.notify(f'Select: {e}'),
+                   on_change=lambda e: ui.notify(f'Change: {e}'))
+
+
+@doc.demo('Run methods', '''
+    You can run methods of the JSONEditor instance using the `run_editor_method` method.
+    This demo shows how to expand and collapse all nodes and how to get the current data.
+''')
+def methods_demo() -> None:
+    json = {
+        'Name': 'Alice',
+        'Age': 42,
+        'Address': {
+            'Street': 'Main Street',
+            'City': 'Wonderland',
+        },
+    }
+    editor = ui.json_editor({'content': {'json': json}})
+
+    ui.button('Expand All', on_click=lambda: editor.run_editor_method('expand', 'path => true'))
+    ui.button('Collapse All', on_click=lambda: editor.run_editor_method('expand', 'path => false'))
+
+    async def get_data() -> None:
+        data = await editor.run_editor_method('get')
         ui.notify(data)
-    ui.button('Show Data', on_click=show_data)
+    ui.button('Get Data', on_click=get_data)
 
 
 doc.reference(ui.json_editor)