Last active
June 28, 2021 18:13
-
-
Save robertainslie/b197e832879b29bf54883a776470bd00 to your computer and use it in GitHub Desktop.
Sample script to map a json object of data to HubSpot form fields. The script takes 2 arguments: 1. An object of data and 2. An object of mappings. Given these two objects, the script will set these values into any fields on a form that match. This implementation fires change events on every field mapping due to HubSpot form rendering that uses …
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function writeFormFieldData(mappingsObject, dataObject) { | |
var mappingsObject = mappingsObject | |
const changeEvent = new Event('change'); | |
var mappedFieldsArray = Object.keys(mappingsObject); | |
var returnedDataArray = Object.keys(dataObject); | |
var fieldsToUpdate = mappedFieldsArray.filter(item => returnedDataArray.includes(item)); | |
fieldsToUpdate.map(function(dataObjectFieldName) { | |
var hsFieldName = mappingsObject[dataObjectFieldName]; | |
fieldToUpdate = document.querySelector(`[name="${hsFieldName}"]`); | |
if (fieldToUpdate == null) { | |
console.log('invalid field name') | |
} | |
else { | |
fieldToUpdate.value = dataObject[dataObjectFieldName]; | |
fieldToUpdate.dispatchEvent(changeEvent) | |
} | |
}) | |
} | |
//sample data object | |
const data = { | |
companyAddress: "25 1st St", | |
companyCity: "Cambridge", | |
companyCountry: "USA", | |
companyCounty: "Suffolk", | |
companyMsa: "Cambrride,MA", | |
companyName: "HubSpot, Inc", | |
companyState: "MA", | |
phone: "companyTelephone", | |
companyZip5: "02141", | |
employeesAtLocationNum: "3000", | |
employeesInAllLocations: "Large", | |
employeesInAllLocationsNum: "5000" | |
} | |
//sample mapping object | |
var fieldMap = { | |
companyName: "company", | |
companyAddress: "address", | |
companyCity: "city", | |
companyState: "state", | |
companyZip5: "zip", | |
companyCountry: "country", | |
employeesAtLocationNum: "numberofemployees", | |
phone: "companyTelephone" | |
} | |
//call function after page load, including | |
//the field mapping object and data object | |
window.addEventListener('load', (event) => { | |
writeFormFieldData(fieldMap, data) | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment