We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

Answered How To Style a Dynamically Created JSON?

    • 42415
    • 115 Posts
    jimmyjazz Reply #1, 5 years, 3 months ago
    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

    This question has been answered by BobRay. See the first response.

      • 17301
      • 932 Posts
      LK Reply #2, 5 years, 3 months ago
      You're placing the raw data into the json placeholder 'markers'. Remove this and it should work
        ■ email: [email protected] | ■ website: https://alienbuild.uk

        The greatest compliment you can give back to us, is to spend a few seconds leaving a rating at our trustpilot: https://uk.trustpilot.com/review/alienbuild.uk about the service we provided. We always drop mention of services offered by businesses we've worked with in the past to those of interest.
        • 54828
        • 1 Posts
        mom4321 Reply #3, 5 years, 3 months ago
        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
          • 42415
          • 115 Posts
          jimmyjazz Reply #4, 5 years, 3 months ago
          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 + '<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)
            • 46886
            • 1,154 Posts
            nuan88 Reply #5, 5 years, 3 months ago
            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.
              • 42415
              • 115 Posts
              jimmyjazz Reply #6, 5 years, 3 months ago
              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)
                • 46886
                • 1,154 Posts
                nuan88 Reply #7, 5 years, 3 months ago
                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 <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... [ed. note: nuan88 last edited this post 5 years, 3 months ago.]
                • discuss.answer
                  • 3749
                  • 24,544 Posts
                  BobRay Reply #8, 5 years, 3 months ago
                  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:

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


                  Then this CSS would put the state in bold:

                  .some_class {
    font-weight: bold;
}
                    Did I help you? Buy me a beer
                    Get my Book: MODX:The Official Guide
                    MODX info for everyone: http://bobsguides.com/modx.html
                    My MODX Extras
                    Bob's Guides is now hosted at A2 MODX Hosting
                    • 42415
                    • 115 Posts
                    jimmyjazz Reply #9, 5 years, 3 months ago
                    Hi BobRay, IT WORKS smiley

                    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
                      • 3749
                      • 24,544 Posts
                      BobRay Reply #10, 5 years, 3 months ago
                      I'm glad I could help. smiley
                        Did I help you? Buy me a beer
                        Get my Book: MODX:The Official Guide
                        MODX info for everyone: http://bobsguides.com/modx.html
                        My MODX Extras
                        Bob's Guides is now hosted at A2 MODX Hosting