document enhancement: how to watch a field that is in an array?

[snowch]

The document shows how to watch a field:

editor.watch('path.to.field',function() {
  // Do something
});

editor.unwatch('path.to.field',function_reference);

I would like to watch a field that is in an array - how do I specify this as a watch?

Many thanks.

[jdorn]

Watching an array is the same as any other field. So, given the following JSON:

{
  "arr": [
    {
      "prop": 1
    }
  ]
}

You would do:

// Watch the array
editor.watch('root.arr',function() {});

// Watch the first element of the array
editor.watch('root.arr.0',function() {});

// Watch the prop of the 3rd element of the array
// You can do this before the element exists and it will still work
editor.watch('root.arr.2.prop',function() {});

[jdorn]

To get a list of all currently watchable paths, you can console log the editor.editors property.

[snowch]

In the end, I have hacked a for loop to watch a fixed number of elements.

 for (var i=0;i<100;i++) {
   var prop_path = 'root.arr.' + i + '.prop';
   editor.watch(prop_path, (function(i) {
      return function() {
         update_prop(i);
      }
   })(i));
}

Is it possible for the editor to do something like this to pass the current row index to the callback:

   editor.watch('root.arr', function(currentIndex) {
     // json editor sets 'currentIndex' to the current row index so we can use it like this
     var prop_editor = editor.getEditor('root.arr.' + currentIndex + '.prop');
     prop_editor.setValue('some value');
   }

[jdorn]

What does currentIndex mean? The item that was changed? If you use the "move up" button to rearrange rows, the array changes, but the items don't necessarily. What would this be set to in that case?

[snowch]

Yes, currentIndex means the index of the item that has changed. If the row's order is rearranged, then the value of the currentIndex will change as well.

To give you a bit more background information, I have a table where one field 'certificate' in the row contains a PEM encoded x509 certificate. The table row has another field 'subject' which is populated automatically by using the jsrsasign library to extract the details from the certificate.

[jdorn]

If you reorder an array and swap row 1 and 2, technically both items changed then. I don't think adding an argument to watch callbacks is going to work for this.

For your use case, I would do something like this:

// Cache the x509 -> subject extraction result
// This means you'll only do the extraction once per unique x509 value
var x509cache = {};

// When any part of the array changes
editor.watch('root.arr', function() {
  // Loop through and update the subject of each item
  var value = editor.getEditor('root.arr').getValue();
  for(var i=0; i<value.length; i++) {
    // If it's not cached, extract the subject and cache the result
    if(!x509cache[value[i].x509]) {
      x509cache[value[i].x509] = extract_subject(value[i].x509);
    }

    value[i].subject = x509cache[value[i].x509];
  }

  // Update the value of the array
  editor.getEditor('root.arr').setValue(value);
});

[snowch]

That looks good - thanks!

[ecamaj]

This should be closed ...