How do you use a for loop to output to JS?

Question

I have a map generated in JS.

I need to set the country-id and url for each country. Both 'country-idandurlare fields in my Craft categories groupcountries`.

{
  "country-id": "FR",
  "url": "http://mysite/country/france"
},

I know (basically) how to output to JS for use in my templates. Here is a link to an earlier question I asked on how to output to JS. This time my question is not how to include JS, but how do I generate a specific output.

How do I incorporate a for loop that produces the desired output for each member of the category country.

{% set nations = craft.categories.group('country') %}
{for country in nations %}
{
"country-id": "{{country.CountryCode}}",
"url": "{{country.url}}",
},
{% endfor %}

Part of the problem is how to I get the loop to also output the script brackets, quotes, commas and attributes that surround the data for each country?

UPDATE -- MORE INFO --- This is the full JS that the above is taken.

<script type="text/javascript">
var map = AmCharts.makeChart( "chartdiv", {
  "type": "map",
    "theme": "light",
    "dataProvider": {
    "map": "worldLow",
    "areas": [ 

              {
                "id": "FR",
                "url": "http://fmysite.dev/country/france"
              },
              {
                "id": "JP",
                "url": "http://mysite.dev/country/japan"
              },
               {
                "id": "SA",
                "url": "http://mysite.dev/country/saudi-arabia"
              },
               {
                "id": "GB",
                "url": "http://mysite.dev/country/united-kingdom"
              },
              ]
  },
   "smallMap":{},
  "areasSettings": {
    // color of areas listed
    "color": "#71d1d7",
    // color of area's outline
    "outlineColor": "#4e93aa",
    // Color of area's outline when user rolls-over it.
    "rollOverOutlineColor": "#000",
    // Color of all areas which are in the map svg file, but not listed as areas in DataSet
    "unlistedAreasColor": "#c7ecf4",
    // Color of all areas' outline which are in the map svg file, but not listed as areas in DataSet 
    "unlistedAreasOutlineColor": "#c7ecf4"
  },

  "listeners": [ {
    "event": "clickMapObject",
    "method": function( e ) {
      // check if clicked map object contains "ajaxUrl" parameter
      if ( e.mapObject.ajaxUrl !== undefined ) {
        // add "description" if it was empty
        if ( e.mapObject.description === undefined )
          e.mapObject.description = "<div id='mapcontent'>Loading...</div>";

        // delay loading by a bit so that map can finish displaying description box and zoom
        setTimeout( function() {
          $( "#mapcontent" ).load( e.mapObject.ajaxUrl );
        }, 1000 );
      }
    }
  } ]


} );
</script>

Answer 1

It'd probably be easier to assemble the items the way you need them in Twig, and then JSON encode them. Try something like this:

{% set nations = craft.categories.group('country') %}
{% set countries = [] %}
{% for country in nations %}
    {% set thisCountry = {
        'country-id' : country.countryCode,
        'url' : country.url
    } %}
    {% set countries = countries|merge([thisCountry]) %}
{% endfor %}

{% set countryJs %}         
var countries = {{ countries|json_encode(constant('JSON_PRETTY_PRINT'))|raw }}
{% endset %}

{% includeJs countryJs %}

Answer 2

There is a much better way to compose a JSON string from Twig templates: the json_encode filter.

To build the data array from your array of category models, you need to loop over them and merge to an empty array row by row. When you are ready with your Twig array, you pipe it through json_encode.

{% set data = {} %}
{% for country in craft.categories.group('country') %}
    {% set data = data|merge([{
        'country-id': country.CountryCode,
        'url': country.url,
    }]) %}
{% endfor %}

<script type="text/javascript">
    window.countryData = {{ data|json_encode|raw }};
</script>

<script src="/js/app.js"></script>