JSON form field customization

A few years back I set up a Drupal Webform as a contact form for county legislators. It was linked from their bio page and for the sake of reusability and not adding 20+ webforms I set it up so the recipient field would be dynamically set based on what bio it was coming from. I added a query string from the link drawing the legislator's Name because that was going to be the Title of the webform page as a reminder of who you're emailing. I wanted to keep it simple so I didn't bother passing the legislator's email address along also. In order to associate the name with their email address I made this really clunky javascript switch statement comparing the Name brought in from the query string to the known email address. It wasn't the best solution and that became obvious after the recent election and now that switch statement needed to be redone with the new names/emails.

Since I built that though I learned a lot more about javascript and JSON. I built a solution for backend editing of content on this very same site where I needed to have lists of committee members available as selectable options on resolution votes. I needed it to filter the members by what committee they actually belonged to so legislator xyz wasn't able to be selected as having voted on something he wouldn't even be involved in. It was a solution to make content editing easier for their admin. What I needed was a JSON feed of members with their committees. 

{"committees":[{"title":"Government Efficiency and Review","field_members":"Joanna Shmoe; John Q. Public; Bob Bobberton; Silas J. Nobody; ..."}]}

The rest is kind of more complicated than I want to go into but basically it let me filter what members were selectable depending on what committee's were involved by way of finding the index of the committee (title) and getting the members into an array that I would then use to make certain checkboxes clickable or not.

So having had some experience with that when this came up again I wanted to apply what I learned there to this new problem.

First thing was I set up a JSON view of the legislators with their Title (name) and contact email fields showing. I have the Views JSON module installed (https://www.drupal.org/project/views_json).
The view format is JSON data document, 
Root Object: members
Top-level child object: blank
Field Output: normal
Plaintext output (checked)
JSON data format: simple
Content-type: text/json

{"members":[{"title":"Mary Jo Jim Bob","Email":"[email protected]"},{"title":"Fred Noname","Email":"[email protected]"},...]}

Next I went to my old javascript where I was setting the email address in that nasty switch statement and replaced this:

switch(legName) {

				case 'Mary%20Jo%20Jim%20Bob':
				legEmail = '[email protected]'
				break;
				case 'Fred%20Noname':
				legEmail = '[email protected]'
				break;

			... //70 lines later...			

				default:
				legEmail = '[email protected]'
			}

With something a little bit more future proof:

var legName = getQueryVariable("legemail"); // get the name from the query string
        var legislators = "http://thatdomain.gov/legislator-json"; // set the json object to a var
        var legEmail; // set legislator email empty variable      

if (legName != false) {//make sure the query string isn't missing. very helpful when going to other pages that aren't involved in this and ending up with errors. hrmm.
            legName = legName.replace(/%20/g, ' '); // replace the html entity space with an actual space which is how the names are formatted in the JSON
            $.getJSON(legislators, function (json) { // use jquery getJSON to access the data
                var legArray = [];        //empty array for the names    
                var legEmails = [];   //empty array for the emails (This might be overkill. If it is please tell me :) )
                var cmIndex  // empty var for the index of the name we get from the query string
           $.each(json.members, function (index, member) {
               legArray.push(member.title); // take the "names" from the title and stick them in our array
               legEmails.push(member.Email); // do the same with the emails (why 2 arrays? do I need to do that??)
           });       

           cmIndex =(jQuery.inArray(legName, legArray)); //find out what the index is of that name and set it to the cmIndex variable
            if (cmIndex > -1) { // if the name is even in that array
            legEmail = legEmails[cmIndex]; // use that index to find where the corresponding email address is in the email array
              $('#edit-submitted-contact').attr('value', legEmail);  // here jquery is doing the actual work by putting the email address into the form in the appropriate field
                } else {
                $('#edit-submitted-contact').attr('value', '[email protected]');    // if the query string has something that isn't actually in our JSON send the email to this guy.
                }    
            });

$('#page-title').html('Contact '+legName); // set the page title to Contact "Name"
} else { // query string is missing
            $('#edit-submitted-contact').attr('value', '[email protected]');  // send the email to this guy.
}

I was pretty happy with the outcome and went ahead and applied it to another similar kludge I set up for contacting the committees. It felt great to take something hacky and hard to maintain and make it update itself depending on the available contact information and members.

Add new comment