1

I have a JSON object full of County names and I want to call it using SSJS then populate a dropdown list in HTML using the Data from the JSON.

JSON looks like this 

[
    "AZ - Maricopa",
    "AZ - Pima",
    "CA - Alameda",
    "CA - Contra Costa",
    "CA - El Dorado",
    "CA - Los Angeles",
    "CA - Orange",
    "CA - Placer",
    "CA - Riverside",
    "CA - San Diego",
    "CA - San Mateo",
    "CA - Santa Clara",
    "CO - Adams",
    "CO - Arapahoe",
    "CO - Boulder",
    "CO - Broomfield",
    "CO - Douglas",
]

The SSJS call would look like this

%%[ set @JSON = HttpGET("http://some-url-that-returns-json") ]%%
    <script runat="server">
    Platform.Load("Core", "1")
    // get JSON from ampscript 
    var jsonObj = Variable.GetValue("@JSON");
    var evaluatedJSON = eval("(" + jsonObj + ")");`
</script>

The HTML would look like this

<html>
    <select class = "county dropdown" name="county" data-placeholder="select a county" required>
        <option value="" >County Name</option> 
    </select>
</html>

And the SSJS populating the dropdown HTML from the JSON would look like this 

<script>
    var select =  $("select.country");
    for(var i = 0; i < jsonObj.length; i++) {
        var opt = document.createElement('option');
        opt.innerHTML = jsonObj[i];
        opt.value = jsonObj[i];
        select.append(opt);
    }
<script>

I am not sure this will work so far but this is how I think it will be set up

The next part will be difficult since I need to pass it through AMPscript following this syntax

SET @AOI = CONCAT(@AOI, IIF(RequestParameter('AZ - Apache') == 'AZ - Apache', 'AZ - Apache;', ''))

SET @AOI = CONCAT(@AOI, IIF(RequestParameter('CA - Alameda') == 'CA - Alameda', 'CA - Alameda;', ''))

And so forth for every County.

I am thinking of using a THIS statement since that would make sense and I wouldn't have to write every possible out look. Since I want this to be dynamic in case the JSON file changes. 

SET @AOI = CONCAT(@AOI, IIF(RequestParameter(THIS) == 'THIS', 'THIS;', ''))

Is it possible using AMPScript?

Improve this question
4
  • 1
    Where is @AOI being used... on the same page as the form or on the processing/receiving page?
    – Mark G
    Commented Mar 2, 2019 at 0:43
  • What is the purpose of the @AOI variable? Is it creating a delimited list? If so, what is the purpose of this list and/or what do you envision the logic behind it being? Is it on the form page, or the processing page? Without further information on this aspect, I am not sure how to help you solve for it.
    – Gortonington
    Commented Mar 2, 2019 at 16:48
  • @Mark '@AOI' is being used on the processing/receiving page
    – Ethan
    Commented Mar 4, 2019 at 15:41
  • @Gortonington The purpose of the @AOI variable is to create a list of areas of interest, this could multiple locations or just one. The logic behind the list is to record it when the user submits based off the dropdown list created from the JSON. I dont want have to update the @AOI of all the possible locations it could be, I want it to just submit based off what the user select.
    – Ethan
    Commented Mar 4, 2019 at 15:45

2 Answers 2

Reset to default
1

If you want to capture which county was selected on the form page, you would only need to pay attention to the name attribute value set on the select element...

Form page...

<script runat="server">
Platform.Load('Core', '1');

// var jsonObj = HTTP.Get('http://some-url-that-returns-json');
var jsonObj = {
  "counties": [
    "AZ - Maricopa",
    "AZ - Pima",
    "CA - Alameda",
    "CA - Contra Costa",
    "CA - El Dorado",
    "CA - Los Angeles",
    "CA - Orange",
    "CA - Placer",
    "CA - Riverside",
    "CA - San Diego",
    "CA - San Mateo",
    "CA - Santa Clara",
    "CO - Adams",
    "CO - Arapahoe",
    "CO - Boulder",
    "CO - Broomfield",
    "CO - Douglas"
  ]
};
var jsonString = Stringify(jsonObj);
</script>

<!doctype html>
<html>
  <head>
    <title></title>
  </head>
  <body>
    <form action="https://processing-page" method="POST">
      <select class="county" name="county">
        <option>Select a county</option>
      <select>
      <button>Submit</button>
    </form>
    <script>
      var json = <ctrl:var name=jsonString />;
      var countyDropdown = document.querySelector('select.county');
      for (var i = 0; i < json.counties.length; i++) {
        var option = document.createElement('option');
        option.value = json.counties[i];
        option.textContent = json.counties[i];
        countyDropdown.appendChild(option);
      }
    </script>
  </body>
</html>

Processing page...

%%[
var @county
set @county = RequestParameter('county')
]%%
You selected: %%=v(@county)=%%

If the user has the option of selecting multiple counties and thus the processing page will be expecting a delimited string (built via client-side JS), the concept still remains the same, but you could leverage the BuildRowsetFromString function on the processing page like so...

%%[
var @counties,
    @county,
    @countyRows,
    @i,
    @row

/* set @counties = RequestParameter('county')
*/
set @counties = 'CA - San Diego;CA - San Mateo;CA - Santa Clara;'
set @countyRows = BuildRowsetFromString(@counties, ';')

for @i = 1 to RowCount(@countyRows) do
  set @row = Row(@countyRows, @i)
  set @county = Field(@row, 1)

  if not Empty(@county) then
]%%

Selected county no. %%=v(@i)=%%: %%=v(@county)=%%<br>

%%[
  endif
next @i
]%%
Improve this answer
1
  • Thank you for your advice and example, I will be testing within the day and let you know the success. Appreciate taking time out of your day to help me. With a little bit of help from internet friends anything is possible!!!
    – Ethan
    Commented Mar 4, 2019 at 20:30
0

I believe you can do this via another for loop. I have not tested this code, but in theory it should work. This may be a bit of a high draw of resources, depending on the size of your JSON - which means the second option below may be your best bet.

On your processing page, you would need to access the original JSON you grabbed that contains all the counties possible and then loop through them and find any that have a value attached (seems from your example that it would only fill if selected.) You then create a delimited string (I chose pipe |, but you can use whatever you want) that is added to for every matched value.

var json = [
    "AZ - Maricopa",
    "AZ - Pima",
    "CA - Alameda",
    "CA - Contra Costa",
    "CA - El Dorado",
    "CA - Los Angeles",
    "CA - Orange",
    "CA - Placer",
    "CA - Riverside",
    "CA - San Diego",
    "CA - San Mateo",
    "CA - Santa Clara",
    "CO - Adams",
    "CO - Arapahoe",
    "CO - Boulder",
    "CO - Broomfield",
    "CO - Douglas",
]

var aoi = ""

for(var i = 0; i < json.length; i++) {

    var county = json[i]

    var QSParam = Platform.Request.GetQueryStringParameter(county);

    if (QSParam) {

        if (aoi == "") {
            var aoi = QSParam;
        } else {
            var aoi += "|" + QSParam;
        }
    }

}

Another option, which may be more efficient is to include a hidden field named 'aoi' in your submit page and have this filled in onclick (via client-side JS or JQuery) of each of your counties in select statement. This will create your list based on user input, removing the need for any processing on your processing page. You can then grab this delimited value by grabbing the parameter same as you do with any other parameter in SSJS or AMPscript.

Improve this answer
1
  • Thanks so much. I like the idea of submitting it with a hidden field, i think this would defiantly be much simpler....always great to be able to talk this through with internet friends. Appreciate your thoughts!!! Hope all is well
    – Ethan
    Commented Mar 4, 2019 at 20:32

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .