Confusing behaviour using JSON store and ng-map info-window

[iperry]

Heya,

I am using the JSON store to allow users to provide custom names for the sensors they deploy on their site. These names are then displayed in the UI instead of the point or hierarchy names.

One use of these names that I have found confusing to implement is adding it to an info-window in ng-map. Using the json value on its own results in an empty string. Its only after I discovered that when I included an empty {{}} did the json value work.

<ma-json-store xid="PCU 3" item="itemPCU3" value="valuePCU3"></ma-json-store>

<info-window id="infoPCU3">
<div layout="column" layout-padding>
<div><span>1 {{itemPCU3.jsonData.deviceName}}</span></div>
<div><span>2 {{'0' + itemPCU3.jsonData.deviceName}}</span></div>
<div><span>3 {{itemPCU3.jsonData.deviceName === null}}</span></div>
<div><span>4 {{itemPCU3.jsonData.deviceName === ''}}</span></div>
<div><span>5 {{itemPCU3.jsonData.deviceName === 'Mixer 1'}}</span></div>
<div><span>6 {{itemPCU3.jsonData.deviceName}} {{itemPCU3.jsonData.deviceName}}</span></div>
<div><span>7 {{}} {{itemPCU3.jsonData.deviceName}}</span></div>
<div><span>8 {{}} {{itemPCU3.jsonData.deviceName === 'Mixer 1'}}</span></div>
<div><a href="tracker?groupName=PCU 3&pcuName=PCU 3">Click here for details</a></div>
</div>
</info-window>

1. /sigh ok maybe the value isn't working
2. Adding a char to start didn't work
3. Mmm, the value is not null? That's good
4. It's not empty either
5. This should be true. What value is it?
6. I accidentally duplicated the value and now both braces are working?? What??
7. So having an empty brace proceeding the value works? What?
8. The condition is now working too? What?

Is there something fundamentally wrong in the way I am using the JSON store values? I am using the same values to change the text on buttons without seeing this behaviour. Is there something with how these values are injected into the mapping tags?

Any help would be great.

As an aside: trying to use the JSON values for the coordinates the ng-map marker tags does not seem to be working anymore.

Thanks
Ian

[phildunlap]

Hi Ian,

I was not able to reproduce anything like this.

My version is the development version of the next core (but nothing changed in this regard from 3.4), so 3.5

My JSON store item had an xid of "my xid here" and the contents are:

{
    "key": "value",
    "otherKey": [
        1,
        0,
        2,
        3
    ]
}

My page was

<ma-json-store xid="my xid here" item="item" value="value"></ma-json-store>
item: {{item}}<br/>
value: {{value}}<br/>
<br/>
item.jsonData.key: {{item.jsonData.key}}<br/>
value.jsonData.key: {{value.jsonData.key}}<br/>
<br/>
item.key: {{item.key}}<br/>
value.key: {{value.key}}<br/>

My page output was:

item: {"xid":"my xid here","name":"myJsonStore","modelType":"JSON_DATA","validationMessages":[],"readPermission":"","editPermission":"","publicData":false,"jsonData":{"key":"value","otherKey":[1,0,2,3]},"id":161,"dataPath":[]}
value: {"key":"value","otherKey":[1,0,2,3]}

item.jsonData.key: value
value.jsonData.key: 

item.key: 
value.key: value

The only thing that comes to mind is that maybe the digest loop wasn't going on the edit page during some of your operations. On the /ui/administration/edit-pages/ page for instance, you can input something that syntactically stops Angular from running, and then further modifications of the code doesn't refresh the preview. To test that, copy your page's code into a new tab on the edit-pages page. That way you ensure the digest loop has a chance to run on the whole page and not get itself tripped up by interpreting the page as it is being developed (even if there are syntax errors to interpret). You could check your developer console when you're experiencing this, as there may be errors that could shed more light on what's happening.

[iperry]

Hi Phil,

Thanks for investigating the issue. I took your suggestion and copied the code to a new page and stripped out everything but the map and its marker. I also added your test above as a confirmation of the JSON store behaviour. The output from your test worked as expected. However, the info-window popup still displayed the odd behaviour.

As another test, I then moved the <ma-json-store> tag outside the ma-map context. This resulted in the corrected behaviour. /cheer /not-cheer

I should clarity that I have have been using the ma-map component, and not ng-map.

I had coded the ma-json-store within the ma-map as I intended to have a loop/repeat to create all the required markers/info-windows. I am unsure how this may be feasible now ma-json-store is needed to be declared outside the ma-map.

Note: there seems to be all sorts of funky issues with using ng-repeat within a ng-map I have discovered in my research.

I appreciate the help. Any other insights you have would be great.

Thanks
Ian

[phildunlap]

Note: there seems to be all sorts of funky issues with using ng-repeat within a ng-map I have discovered in my research.

I was able to recreate the issue you're describing and show it to Jared. He said something pretty similar about ng-map having some odd behaviors waiting to be uncovered. I guess the good news in your observations is that placing the empty expression evaluation seems to get it to work, so maybe that's an acceptable solution? I tried a few other things like creating a bulletin in the scope and assigning the json store directive's outputs to keys on the bulletin, but I got the same behavior still. What was weird to me is that (inside the info window)

<ma-json-store xid="my xid here" item="item" value="value"></ma-json-store> <!-- can be outside the info window, same behavior -->
value: {{}} {{value}}<br/> <!-- renders, clearly has 'key' attribute -->
value.key: {{value.key}}<br/> <!-- doesn't render -->

I think it's just an oddity of ng-map. If the solution you found is acceptable, that's probably where it'll get left. I didn't seem to get messages to my developer console specific to when I had things that didn't appear. Very strange behavior.