I have an address that has been entered by the user, and the ‘standardized’ address returned by the USPS address verification API. I would like to present both addresses side-by-side and have the user select one. I thought using radio buttons would be a good option, but I cant figure out how to populate the radio button choices with the addresses. I have each field in each address stored in a separate variable. I could create an array variable and put each entire address in there as separate objects, but I can’t see how I can format each address to display nicely. Any suggestions please?
what do you mean by nicely? more than one line? is the address a structured object or a single string?
@dorilama Yes have it display on more than one line. Yes it’s a structured object.
The radio input element preserves newlines in the text of the label, so if you bind an object like this:
[
{ label: "opt1\nasdf", value: 1 },
{
label: `opt2
asdf`,
value: 2,
},
];
you get this:
You may need to create an array like that with javascript, something like:
const options = yourArrayData.reduce((accumulator, currentValue) => {
const label = `${currentValue.street}
${currentValue.postcode}`;
const value = 0; // set the value
const opt = { label, value };
accumulator.push(opt);
return accumulator;
}, []);
or using a for loop in a workflow.
Thanks @dorilama. So I need a single array to populate the radio button options, and each option needs to be an object in the array. Does each line in the option need to be a separate key/value in the object? I would like each radio button option to be displayed as below (three lines in total for each radio button option):
Address1
Address2
City, State, Zip
I got something to display by making each option a single-line object unto itself with ‘label’ and ‘value’ keys. But the line breaks aren’t being recognized:
I can tell I am doing something wrong with the \ character, but can’t figure it out.
1 Like
Well done 
remember to set an unique value for each option
1 Like