Improve detection of value type in transform modal

HISTORY.md

@@ -6,6 +6,7 @@ https://github.com/josdejong/jsoneditor
 ## not yet released, version 5.32.2
 
 - Fixed #416: Clipped action menu for append nodes.
+- Improve detection of value type in transform modal.
 - Styling improvements in the transform modal.
 
 

src/css/contextmenu.css

@@ -271,7 +271,7 @@ div.jsoneditor-contextmenu button.jsoneditor-type-modes > div.jsoneditor-icon {
 }
 
 .jsoneditor-modal table td {
-  padding: 5px 0;
+  padding: 3px 0;
 }
 
 .jsoneditor-modal p:first-child {
@@ -451,7 +451,7 @@ div.jsoneditor-contextmenu button.jsoneditor-type-modes > div.jsoneditor-icon {
 .jsoneditor-modal .jsoneditor-jmespath-label {
   font-weight: bold;
   color: dodgerblue;
-  margin-top: 10px;
+  margin-top: 20px;
   margin-bottom: 5px;
 }
 
@@ -468,6 +468,8 @@ div.jsoneditor-contextmenu button.jsoneditor-type-modes > div.jsoneditor-icon {
   position: relative;
   display: inline-block;
   width: 100%;
+  padding-top: 2px;
+  padding-bottom: 2px;
 }
 
 .jsoneditor-modal .jsoneditor-inline:not(:last-child) {
@@ -480,13 +482,13 @@ div.jsoneditor-contextmenu button.jsoneditor-type-modes > div.jsoneditor-icon {
 }
 
 .jsoneditor-modal .jsoneditor-jmespath-filter-field {
-  width: 170px;
+  width: 180px;
 }
 .jsoneditor-modal .jsoneditor-jmespath-filter-relation {
   width: 100px;
 }
 .jsoneditor-modal .jsoneditor-jmespath-filter-value {
-  min-width: 100px;
+  min-width: 180px;
   flex: 1;
 }
 

src/js/showTransformModal.js

@@ -2,7 +2,8 @@ var jmespath = require('jmespath');
 var picoModal = require('picomodal');
 var Selectr = require('./assets/selectr/selectr');
 var translate = require('./i18n').translate;
-var debounce = require('./util').debounce;
+var util = require('./util');
+var debounce = util.debounce;
 
 var MAX_PREVIEW_LINES = 100;
 
@@ -183,12 +184,17 @@ function showTransformModal (node, container) {
         function generateQueryFromWizard () {
           if (filterField.value && filterRelation.value && filterValue.value) {
             var field1 = filterField.value;
+            var examplePath = ['0'].concat(util.parsePath('.' + field1))
+            var exampleValue = util.get(value, examplePath)
             // TODO: move _stringCast into a static util function
-            var value1 = JSON.stringify(node._stringCast(filterValue.value));
+            var value1 = typeof exampleValue === 'string'
+                ? filterValue.value
+                : node._stringCast(filterValue.value);
+
             query.value = '[? ' +
                 field1 + ' ' +
                 filterRelation.value + ' ' +
-                '`' + value1 + '`' +
+                '`' + JSON.stringify(value1) + '`' +
                 ']';
           }
           else {
@@ -209,8 +215,8 @@ function showTransformModal (node, container) {
             var values = [];
             for (var i=0; i < selectFields.options.length; i++) {
               if (selectFields.options[i].selected) {
-                var value = selectFields.options[i].value;
-                values.push(value);
+                var selectedValue = selectFields.options[i].value;
+                values.push(selectedValue);
               }
             }
 
@@ -219,14 +225,14 @@ function showTransformModal (node, container) {
             }
 
             if (values.length === 1) {
-              query.value += '.' + value;
+              query.value += '.' + selectedValue;
             }
             else if (values.length > 1) {
               query.value += '.{' +
                   values.map(function (value) {
                     var parts = value.split('.');
                     var last = parts[parts.length - 1];
-                    return last + ': ' + value;
+                    return last + ': ' + selectedValue;
                   }).join(', ') +
                   '}';
             }

src/js/util.js

@@ -1150,3 +1150,20 @@ exports.makeFieldTooltip = function (schema, locale) {
 
   return tooltip;
 }
+
+/**
+ * Get a nested property from an object.
+ * Returns undefined when the property does not exist.
+ * @param {Object} object
+ * @param {string[]} path
+ * @return {*}
+ */
+exports.get = function (object, path) {
+  var value = object
+
+  for (var i = 0; i < path.length && value !== undefined && value !== null; i++) {
+    value = value[path[i]]
+  }
+
+  return value;
+}

test/test_large_array.html

@@ -66,6 +66,7 @@
     json.numbers.push(i);
     json.array.push({
       name: 'Item ' + i,
+      id: String(i),
       index: i,
       time: new Date().toISOString(),
       location: {

test/util.test.js

@@ -158,7 +158,30 @@ describe('util', function () {
       assert.equal(util.getIndexForPosition(el, -2, -2), -1);
     });
 
-  })
+  });
+
+  describe('get', function () {
+    it('should get a nested property from an object', function () {
+      var obj = {
+        a: {
+          b: 2
+        },
+        c: 3,
+        d: null,
+        e: undefined
+      }
+
+      assert.strictEqual(util.get(obj, ['a', 'b']), 2);
+      assert.strictEqual(util.get(obj, ['c']), 3);
+      assert.deepStrictEqual(util.get(obj, ['a']), { b: 2});
+      assert.strictEqual(util.get(obj, ['a', 'foo']), undefined);
+      assert.strictEqual(util.get(obj, ['a', 'foo', 'bar']), undefined);
+      assert.strictEqual(util.get(obj, ['d']), null);
+      assert.strictEqual(util.get(obj, ['d', 'foo', 'bar']), null);
+      assert.strictEqual(util.get(obj, ['e']), undefined);
+    })
+  });
+
   describe('makeFieldTooltip', function () {
     it('should return empty string when the schema is missing all relevant fields', function () {
       assert.strictEqual(util.makeFieldTooltip({}), '')