Are there any CRUD examples of using JSONForms using RESTful API

General
2

Hi @ralph-lance(ralph-lance), JSON Forms itself is primarily intended for rendering the form. CRUD operations are usually handled outside of it, by the application itself. There you can employ your favorite frameworks or for example just use Javascript’s fetch.

Example:

const App = () => {
  const [appState, setAppState] = useState({ type: 'loading' });
  const [data, setData] = useState();
  const [schemas, setSchemas] = useState();

  useEffect(() => {
    fetch('http://example.com/xyz')
      .then((response) => response.json())
      .then((responseData) => {
        setData(responseData.data);
        setSchemas(responseData.schemas);
        setAppState({ type: 'showForm' });
      })
      .catch((error) => {
        setAppState({ type: 'error', error });
      });
  }, []);

  if (appState.type === 'loading') {
    return <div>Loading...</div>;
  }

  if (appState.type === 'error') {
    return <div>Error: {appState.error}</div>;
  }

  const sendData = () =>
    fetch('http://example.com/xyz/data', {
      method: 'PUT',
      body: JSON.stringify(data),
    });

  return (
    <>
      <JsonForms
        data={data}
        schema={schemas.schema}
        uischema={schemas.uiSchema}
        onChange={({ data }) => setData(data)}
      />
      <button onClick={() => sendData()}>Send Data</button>
    </>
  );
};

Note that this is only a very rough showcase to demonstrate the underlying principles of how JSON Forms can be combined with CRUD. It misses proper error handling, it can’t easily be tested, there is no kind of validation, defensive programming, it has no configuration, authentication etc.