<![CDATA[ How To Style a Dynamically Created JSON? - MODX Community Forums]]> https://forums.modx.com/thread/?thread=104773 <![CDATA[How To Style a Dynamically Created JSON?]]> https://forums.modx.com/thread/104773/how-to-style-a-dynamically-created-json#dis-post-563434 How To Style a Dynamically Created JSON?

MODX Revolution 2.7.0-pl
MIGX 2.12.0-pl

Using migxloopcollection to json output I am generating a json file to populate map markers, here's that code:
[[!migxLoopCollection?
&packageName=`towersite`
&classname=`TowerSite`
&selectfields=`id,siteid,state,township,address,towertype,lat,lng`
&toJsonPlaceholder=`markers`
&tpl=`towTpl`
]]
<script>markers = [[+markers]]</script>


And the towTpl code:
<p>Site ID<strong>[[+siteid]]</strong><br>
State<strong>[[+state]]</strong><br>
Township<strong>[[+township]]</strong><br>
Address<strong>[[+address]]</strong><br>
Tower Type<strong>[[+towertype]]</strong></p>


Currently the markers are displayed on the map and when clicked they display the correct data, however I want to highlight this data in bold letters and have an attribute for each set of data as in the above towTpl

However this styling I am trying to implement is having no effect, the popup is only displaying the raw data in the JSON

fyi ..... I'm using an MIGXdb CMP to input the data and the migxloopcollection to output as a JSON file, this way every time the CMP is updated the map automatically updates (upon page refresh)

It could be I need a different format to create the JSON file, but it took me nearly 2 days just to get the map markers to display as clickable with the correct populated data, so I'm kinda out of ideas on that.

I'm open to suggestions on the best way to achieve this]]>
jimmyjazz Jan 04, 2019, 06:55 AM https://forums.modx.com/thread/104773/how-to-style-a-dynamically-created-json#dis-post-563434
<![CDATA[Re: How To Style a Dynamically Created JSON?]]> https://forums.modx.com/thread/104773/how-to-style-a-dynamically-created-json#dis-post-563472
]]>
BobRay Jan 08, 2019, 06:16 AM https://forums.modx.com/thread/104773/how-to-style-a-dynamically-created-json#dis-post-563472
<![CDATA[Re: How To Style a Dynamically Created JSON?]]> https://forums.modx.com/thread/104773/how-to-style-a-dynamically-created-json#dis-post-563452

Thank you so much.

Once I could see it working I just amended it slightly to include each items named attribute (see below):

'<br>State: <span class="mapbold">' + markers[i].state + '</span><br>'


But it was your coded suggestion that solved this issue]]>
jimmyjazz Jan 05, 2019, 04:38 AM https://forums.modx.com/thread/104773/how-to-style-a-dynamically-created-json#dis-post-563452
<![CDATA[Re: How To Style a Dynamically Created JSON? (Best Answer)]]> https://forums.modx.com/thread/104773/how-to-style-a-dynamically-created-json#dis-post-563448
If you don't mind messing with the existing code, something like this might also work:

'<br><span class="some_class">' + markers[i].state + '</span><br>' 


Then this CSS would put the state in bold:

.some_class {
    font-weight: bold;
}
]]>
BobRay Jan 04, 2019, 06:27 PM https://forums.modx.com/thread/104773/how-to-style-a-dynamically-created-json#dis-post-563448
<![CDATA[Re: How To Style a Dynamically Created JSON?]]> https://forums.modx.com/thread/104773/how-to-style-a-dynamically-created-json#dis-post-563446
we could also try attaching a class to the data, as the only thing that seems not to be working is the <strong>, I am assuming some html structure is going through, but maybe not. still, a class or id would be helpful if it passes

if there is no html then its being stripped out, I guess...]]>
nuan88 Jan 04, 2019, 05:37 PM https://forums.modx.com/thread/104773/how-to-style-a-dynamically-created-json#dis-post-563446
<![CDATA[Re: How To Style a Dynamically Created JSON?]]> https://forums.modx.com/thread/104773/how-to-style-a-dynamically-created-json#dis-post-563445
I also would prefer not to use JSON, however I am using Leaflet Maps and their javascript file requires the 'markers' JSON so I am a bit stuck with it (see leaflet javascript code in my last post).

I have got this working, displaying the markers on the map and I can click on them to reveal the data in the JSON.

What I cannot do is style it so each data item has its own attribute (leading title name) and make the JSON data stand out as bold text. I do not want the Attribute and the JSON data to be strong, only the JSON date should be strong (bold)]]>
jimmyjazz Jan 04, 2019, 05:00 PM https://forums.modx.com/thread/104773/how-to-style-a-dynamically-created-json#dis-post-563445
<![CDATA[Re: How To Style a Dynamically Created JSON?]]> https://forums.modx.com/thread/104773/how-to-style-a-dynamically-created-json#dis-post-563444
But, assuming its needed, I note that your html is not working, but as you say the data is there. That's odd and I don't have a solution for that precise issue.

However my suggestion is to put it all in a div and style it with css, if I make a div and set regular text or whatever within that div to be strong, I would think it would apply consistently.

Trying to think outside the box lol. It would have its own limitations but might work for you, and it might not be hard to implement depending on your use case.]]>
nuan88 Jan 04, 2019, 04:43 PM https://forums.modx.com/thread/104773/how-to-style-a-dynamically-created-json#dis-post-563444
<![CDATA[Re: How To Style a Dynamically Created JSON?]]> https://forums.modx.com/thread/104773/how-to-style-a-dynamically-created-json#dis-post-563439
I tried exactly what mom4321 suggested but that made the markers disappear from the map.

I also tried removing this line:
&toJsonPlaceholder=`markers`

This had the same result of removing the markers from the map.

Originally I had the map working perfectly with my styling with an independent JSON file called 'markers', but with this method the JSON file does not auto update when the CMP is updated with new data. Hence my need to auto create the JSON with the migxloopcollection call.

The reason I need the JSON output from the MySql is this line of code from the map javascript:
for ( var i=0; i < markers.length; ++i )
{
 L.marker( [markers[i].lat, markers[i].lng], {icon: myIcon} )
  .bindPopup( '' + markers[i].siteid + '<br>' + markers[i].state + '<br>' + markers[i].township + '<br>' + markers[i].address + '<br>' + markers[i].towertype + '<br>')
  .addTo( map );
}

Really appreciate you guys taking the time to try to solve this but unfortunately I still cannot work out how to get the styling into this JSON (unless I've misunderstood your suggestions)]]>
jimmyjazz Jan 04, 2019, 11:23 AM https://forums.modx.com/thread/104773/how-to-style-a-dynamically-created-json#dis-post-563439
<![CDATA[Re: How To Style a Dynamically Created JSON?]]> https://forums.modx.com/thread/104773/how-to-style-a-dynamically-created-json#dis-post-563436 How To Style a Dynamically Created JSON?

MODX Revolution 2.7.0-pl
MIGX 2.12.0-pl

Using migxloopcollection to json output I am generating a json file to populate map markers, here's that code:
<script>markers = </script>


And the towTpl code:
<p>Site ID<strong></strong><br>
State<strong></strong><br>
Township<strong></strong><br>
Address<strong></strong><br>
Tower Type<strong></strong></p>


Currently the markers are displayed on the map and when clicked they display the correct data, however I want to highlight this data in bold letters and have an attribute for each set of data as in the above towTpl

However this styling I am trying to implement is having no effect, the popup is only displaying the raw data in the JSON

fyi ..... I'm using an MIGXdb CMP to input the data and the migxloopcollection to output as a JSON file, this way every time the CMP is updated the map automatically updates (upon page refresh)

It could be I need a different format to create the JSON file, but it took me nearly 2 days just to get the map markers to display as clickable with the correct populated data, so I'm kinda out of ideas on that.

I'm open to suggestions on the best way to achieve this]]>
mom4321 Jan 04, 2019, 09:33 AM https://forums.modx.com/thread/104773/how-to-style-a-dynamically-created-json#dis-post-563436
<![CDATA[Re: How To Style a Dynamically Created JSON?]]> https://forums.modx.com/thread/104773/how-to-style-a-dynamically-created-json#dis-post-563435 lkfranklin Jan 04, 2019, 08:48 AM https://forums.modx.com/thread/104773/how-to-style-a-dynamically-created-json#dis-post-563435