Dropdown list from API, with value != text

Support
1

Hi

I am trying to populate a dropdown with data coming from an API. Is it possible to populate it so that the text is different to the value?

So achieve something like this:


  <option value="some-id">Friendly text</option>

Currently I just end up with the value, not the text.

I’m starting with code something like this:

const response = await fetch('https://some.api/schools');
const schoolData = await response.json();
const schools = schoolData.map( s => {
  let o = {};
  o.value = s["Email"];
  o.title = s["Name"];
  return o;
}).sort();
MyDropdown.options = schools;

Thanks
Tim

2

Hi Tim,

You can modify the display text through this format.

MyDropdown.options = [{ value: ‘New Value 1’, label: ‘New Display/Label’, image: ‘’ }];

3

Thanks Kenny,

That is the solution! Much appreciated. I had tried text and title, but not label.

The code now becomes

const response = await fetch('https://some.api/schools');
const schoolData = await response.json();
const schools = schoolData.map( s => {
  let o = {};
  o.value = s["Email"];
  o.label = s["Name"];
  return o;
}).sort();
MyDropdown.options = schools;

Tim