Recently, I've been attempting to modify the flag value of an item within a complex object. The structure of the object is as follows:
modelData
[0]:
Main: xz1
Sub: a,b,c,d,e
show: true
[1]:
Main: xs1
Sub: g,h,i,j,k
show: false
My goal is to access this object and switch the flag value - toggling it from true to false and vice versa.
This is the code I attempted to use:
toggleShow: function (item) {
var index = modelData.indexOf(item);
modelData[index].show = item.show ? false : true; // should work but sadly doesn't :(
}
The data within the 'item' during the function is represented as:
item
{...}
__proto__: {...}
Main: "AXD"
Sub: [ fg,jk,ik,ko]
show: true
It's worth noting that 'modelData' is an observable Array.
modelData
function observable() {
if (arguments.length > 0) {
// Write
// Ignore writes if the value hasn't changed
if (observable.isDifferent(_latestValue, arguments[0])) {
observable.valueWillMutat
[Methods]: {...}
__proto__: {...}
_id: 168
_latestValue: [[object Object]]
_subscriptions: {...}
arguments: null
caller: null
length: 0
prototype: {...}
Using '_latestValue', I can retrieve the content of the object.
modelData._latestValue
[[object Object]]
__proto__: []
length: 1
[0]: {...}
Although, I have encountered an issue where I am unable to access the value using the element index. Any insights on where I might be going wrong and why I'm facing difficulties in accessing the value by index would be greatly appreciated.
UPDATE:
I have managed to successfully toggle the flag value. However, after updating the flag value, my list in view fails to reflect the changes. Here's the fiddle with the issue here Output:
+ Main1
hello
hi
+ Main2
one
two
When clicking the plus symbol, the sublist should hide. Clicking again should reveal the sublist once more.
Any suggestions or recommendations would be highly valuable at this point.