JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<pre id="out"></pre>

JavaScript

const rules = [
  'and',
  ['not', ['contains', 'title', 'pizza']],
  [
    'and',
    ['gt', 'cost', -5000],
    ['lt', 'cost', 5000],
  ],
];

function toSqlUnsafe(rule) {
	switch (rule[0]) {
  	case 'and': return toSqlUnsafe(rule[1]) + ' AND ' + toSqlUnsafe(rule[2]);
    case 'gt': return `${rule[1]} > ${rule[2]}`;
    case 'lt': return `${rule[1]} < ${rule[2]}`;
    case 'contains': return `${rule[1]} like "%${rule[2]}%"`;
    case 'not': {
    	switch (rule[1][0]) {
      	case 'contains': return `${rule[1][0]} not like "%${rule[1][1]}%"`
        // etc.
      }
    }
  }
}

out.textContent = toSqlUnsafe(rules);