JavaScript Object Property editing

[SweatersInSummer]

I'm creating (what feels like) a complicated script for use in creating a data based glossary as part of an in5 HTML 5 export. 

It takes a tab delimited text file and converts it into a js Array of Objects, each object containing the properties: term, definition, and link. Example below:

{
  term:"Term goes here",
  definition:"The definition goes here",
  link:"Page links go here"
}

My issue arrises when trying to edit the contents of objects via my Dialog with a listbox containing the terms, and edittext fields which default to the properties of the array objects as they are selected. I use event listeners to detect 'changing' and 'change' on the edittext fields like so:

// Edittext field for the Term
var displayTerm = displayGrp.add("edittext", [0, 0, 350, 20]);

// Edittext field for the Defintion
var displayDef = displayGrp.add("edittext", [0, 0, 350, 150],
  {alignment: ['fill', 'fill']},{multiline: true});

// Statictext field for the Link
var displayLinks = displayGrp.add("statictext", [0, 0, 350, 20]);

//Update the Listbox item with the edittext field contents
//putting these items in the 'change' event listener only 
//updated after a few unfocus/focus of other fields
displayTerm.addEventListener('changing', function() {
   var index = termListBox.selection.index;
   var newText = this.text;

   termListBox.items[index].text = newText;
})

//Update the object property with the edittext field contents
displayDef.addEventListener('changing', function() {
    var index = termListBox.selection.index;
    var newText = this.text;
    splitGlossArray[index].definition = newText;
    updateGlossData(splitGlossArray)
})

//Update the object property with the edittext field contents
displayTerm.addEventListener('change', function() {
    var index = termListBox.selection.index;
    var newText = this.text;

    splitGlossArray[index].term = newText;

    //Alerts to check array object properties
    alert(splitGlossArray[index].term);
    alert(splitGlossArray[index]);
    alert(typeof(splitGlossArray[index]));

    alert(splitGlossArray[index].term);
})

But its producing curious results. If given the example object above, when editing the field text and clicking away you get the following outputs in the alerts:

Term field editted to: "Term will never go here"

alert(splitGlossArray[index].term);
//Returns "Term will never go here"

alert(splitGlossArray[index]);
//Returns:
// {
//   term:"Term goes here",
//   definition:"Definition goes here",
//   link:"Page links go here"
// }

alert(typeof(splitGlossArray[index]));
//Returns: object

alert(splitGlossArray[index].term);
//a double check to make sure the term property 
//hasnt been overwritten
//Returns "Term will never go here"

So whats going on here? Why is the object property saying its being changed in my alerts, but the object overall is not?

[m1b]

Is this UXP?

[SweatersInSummer]

It is not, just vanilla JS/ES

[Marc Autret]

Hi @SweatersInSummer 

We don't see the whole code so it's hard to conclude. For example, I suppose you also have a 'change' event listener on termListBox too (in order to reflect dynamically the user selection in displayTerm). Also, we don't know what the function updateGlossData does. The structure of splitGlossArray is not clearly declared in your snippet, hence we can just assume that it looks like [ { term:str, definition:str, link:str }, { term:str, definition:str, link:str }, …]. However, it is strange that alert(splitGlossArray[index]) displays a clean json-like message

// {
//   term:"Term goes here",
//   definition:"Definition goes here",
//   link:"Page links go here"
// }

as the default output — at least in ExtendScript — should be [object Object]. So there are other data, methods, prototype extensions, etc, that are not visible in your snippet.

Given all these uncertainties, my only (weak) intuition is that multiple change/changing event callbacks intertwine in an unexpected way, which might result from the alert statement itself. Indeed, when a modal window is active, alert forcibly creates an outer window that notifies 'blur' events (aka unfocus) on the widgets of the original window. It often happens that such blur events induce change/changing callbacks behind the scenes. As a result, the state of your widgets is not the same before and after alert. (This is a difficulty many of us have encountered in ScriptUI and it requires a little attention to detail when you need to check the active state/value/content of a widget.)

Anyway this is just one hypothesis among others. We need to see more code to fully understand the bug.

[In addition, SUI event loops and targets are not strictly ordered the same way in macOS and Windows, and they may differ across ID versions! So your exact environment is an important clue here.]

Best,

Marc

[SweatersInSummer · Accepted solution]

thanks for the reply, i realized later after posting that i had been making a mistake in how i was setting some of the data, leaving the string that i was parsing and adding object properties to it, so the alerts were just reading the string which wasn't being modified and the strings properties which were. sorry for the wasted time!