Get full list of properties from enumeration

Adobe XD UXP Plugin API
1

This was discussed before but when enumerating an object only a few properties are shown.

Use Case
Mikeal is working on a plugin and adds a list to his plugin. On the list change he is trying to find the selected option but doesn’t know how. So he enumerates through all the properties on the list. Only the properties starting with an underscore are shown.

2

Can you elaborate? What kind of list is being added, and what is a “list change”?

(Sorry if I’m being slow here.)

3

If you get an HTML element or object and you enumerate the properties many are not listed.

IIRC any properties on the super classes are not enumerated.

  // get selected option and add its properties to an array
  var object = myDropdown.selectedOptions[0];
  for (var property in object) {
    properties.push(property + ":" + object[property]);
  }

 console.log(properties);

 // output with some formatting applied
 object {
  _anySiblingsSelectorHash     false
  _attributes: {}
  _childrenSelectorHash        false
  _computedStyleMatchers: {}
  _domClient: {}
  _firstChild: {}
  _lastChild: {}
  _layoutInfo: {}
  _mutation                    -9007199254740991
  _namespaceURI                http://www.w3.org/1999/xhtml
  _nativeId                    64
  _nestedSelectorHash          false
  _nextSibling: {}
  _nextSiblingSelectorHash     false
  _nodeName                    option
  _ownerDocument: {}
  _parentNode: {}
  _previousSibling             null
  _properties                  [object Map]
  _scrollInfo: {}
  _style: {}
  oncancel                     undefined
  onchange                     undefined
  onclick                      undefined
  onclose                      undefined
  onerror                      undefined
  onfocus                      undefined
  oninput                      undefined
  onkeydown                    undefined
  onkeyup                      undefined
  onload                       undefined
  onsubmit                     undefined
 }

Notice in the list above that innerHTML and innerText are not listed but both are properties of an option object.

4

You’re actually seeing the private internals of UXP UI rendering here… the reason being is that they are just simple fields. Unfortunately in JS getters and setters are not enumerable by default (or when using get/set syntax), and that means fields like innerHTML don’t show. This is why you may often get objects that render as {}.

When CDT lands (it’s enabled in the panels prerelease, btw), this may be less of an issue, since Chrome lets you inspect the object more directly.