How To Style a Dynamically Created JSON? - My Forums

How To Style a Dynamically Created JSON?

jimmyjazz — Jan 04, 2019, 06:55 AM

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`
]]

And the towTpl code:

Site ID[[+siteid]]

State[[+state]]

Township[[+township]]

Address[[+address]]

Tower Type[[+towertype]]

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

Re: How To Style a Dynamically Created JSON?

BobRay — Jan 08, 2019, 06:16 AM

I'm glad I could help.

Re: How To Style a Dynamically Created JSON?

jimmyjazz — Jan 05, 2019, 04:38 AM

Hi BobRay, IT WORKS

Thank you so much.

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

'
State: ' + markers[i].state + '
'

But it was your coded suggestion that solved this issue

Re: How To Style a Dynamically Created JSON? (Best Answer)

BobRay — Jan 04, 2019, 06:27 PM

As a last resort, you could use JQuery or plain JavaScript to find and style the elements. If there are no classes or IDs it will be ugly, but it's probably still possible as long as the page is valid HTML.

If you don't mind messing with the existing code, something like this might also work:

'
' + markers[i].state + '
'

Then this CSS would put the state in bold:

.some_class {
    font-weight: bold;
}

Re: How To Style a Dynamically Created JSON?

nuan88 — Jan 04, 2019, 05:37 PM

ah I see...hmm could you look at the data output and see whether the attributes have html classes or any other data that you could target with css

we could also try attaching a class to the data, as the only thing that seems not to be working is the , 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...

Re: How To Style a Dynamically Created JSON?

jimmyjazz — Jan 04, 2019, 05:00 PM
Hi nuan88, Thanks for taking the time to share your input.

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)

Re: How To Style a Dynamically Created JSON?

nuan88 — Jan 04, 2019, 04:43 PM
Ok I would def keep in mind that any way to avoid the json entirely should be considered. It just doesn't make a heck of a lot of sense to make it then have to deal with it, json isn't a convenient way.

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.

Re: How To Style a Dynamically Created JSON?

jimmyjazz — Jan 04, 2019, 11:23 AM
Hi LK & mom4321, thanks for the input

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 + '
' + markers[i].state + '
' + markers[i].township + '
' + markers[i].address + '
' + markers[i].towertype + '
') .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)

Re: How To Style a Dynamically Created JSON?

mom4321 — Jan 04, 2019, 09:33 AM
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:

And the towTpl code:

Site ID
State
Township
Address
Tower Type

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

Re: How To Style a Dynamically Created JSON?

lkfranklin — Jan 04, 2019, 08:48 AM
You're placing the raw data into the json placeholder 'markers'. Remove this and it should work