JSFiddle - React, Tailwind, and code Playground

by JayData

HTML

<script src="http://include.jaydata.org/jaydata.js"></script>
<div id="output"></div>

JavaScript

$data.Entity.extend('Chefkoch.Cookbook.v2.Ingredient', {
            'id': { key: false, type: 'Edm.Int32', nullable: false, required: true },
            'name': { key: false, type: 'Edm.String', nullable: false, required: true },
            'unit': { key: false, type: 'Edm.String', nullable: false, required: true },
            'amount': { key: false, type: 'Edm.Decimal', nullable: false, required: true }
        });

        $data.Entity.extend('Chefkoch.Cookbook.v2.Recipe', {
            'id': { key: true, type: 'Edm.String', nullable: false, required: true },

            'ingredients': {
                type: 'Array', elementType: 'Chefkoch.Cookbook.v2.Ingredient', 
                
                converter: {
                sqLite: {
                    fromDb: function (value, memberDefinition, context, type) {
                        alert("from");
                        return (value ? JSON.parse(value) : undefined);
                    },
                    toDb: function (value, memberDefinition, context, type) {
                        alert("to");
                        return (value ? JSON.stringify(value) : undefined);
                    }

                }
                }
            }
        });


        $data.EntityContext.extend("ItemContext", {
            Items: { type: $data.EntitySet, elementType: 'Chefkoch.Cookbook.v2.Recipe' }
        });



var c = new ItemContext({provider:'local'});
c.onReady().then(function() {
    c.Items.add({id:Math.random().toString(), ingredients: [ { id:'ig1', name:'a', unit:'pc', amount: '123'}, { id:'ig2', name:'a', unit:'pc', amount: '123'}                                                          
                                                           ]});
    return c.saveChanges();
}).then(function() {
    c.Items.toArray().then(function(items) {
        $('#output').append('<div>' + JSON.stringify(items) + '</div>');
    });
});