(Updated code) - thanks, @sfdcfox

I have been stuck on this for many hours now, I really hope someone can share an insight:

I have a combobox, and I wish to populate it with the values at this API endpoint: https://bitpay.com/api/rates

So, the format of the JSON is:


For the combobox, the label will be the "name" field, and the value will be the rate field.

I've tried passing this information to LWC in many formats - an object(with String, Decimal fields), as a Map<String,String> - always with the same result.

The frustrating thing is that the combobox is being populated with 183 rows, but they are all blank.

I have tried various methods of JSON.parse(JSON.stringify(data)) each of the fields, but cannot get them to display. If anyone was able to help me with this, you would have my eternal gratitude - thanks guys

Oh, and btw was following this tutorial (have also tried a few others) http://santanuboral.blogspot.com/2019/07/display-lwc-combobox-event-propagaton.html


    title="List of Contacts - Lightning Web Component"
      placeholder="Choose a currency"
    Selected Rate: {selectedRate}


import { LightningElement } from "lwc";

export default class BitCoin2 extends LightningElement {
  statusOptions = [];
  selectedRate = "None";
  connectedCallback() {
    const URL = "https://bitpay.com/api/rates";
    fetch(URL, {
      method: "GET",
      headers: {
        Accept: "application/json"
      .then((response) => {
        if (response.ok) {
          return response.json();
      .then((responseJSON) => {
        this.statusOptions = JSON.parse(responseJSON.data).map(
          ({ name: label, rate: value }) => ({ value, label })
  handleChange(event) {
    this.selectedRate = event.target.value;

1 Answer 1


You haven't shown what the wrappers look like, but regardless, I think you're overthinking things.

Here's my take on how to handle this:

public static String getCurrencies() {
  Http http = new Http();
  HttpRequest request = new HttpRequest();
  HttpResponse response = http.send(request);
  if (response.getStatusCode() == 200) {
    return response.getBody();
  return '[]';

No wrapper required. As far as the far end, having already deserialized once, you don't need to reserialize and re-deserialize again either.

@wire(getCurrencies) handleCurrencyResult(result) {
  if(result.data) {
    this.statusOptions = JSON.parse(result.data).map(
      ({name: label, rate: value})=>({value, label})

If you want to keep the wrappers, you can, it's just not terribly efficient to do so for something as simple as three variables.

Edit: We can't use List<Map<String, Object>>, so it's actually better to just return the string directly and parse it client-side. I'll update the demo to reflect this. Also, methods that are used in wires must be cacheable=true, as demonstrated above.


  • Thanks so much for taking the time to answer my question - I never new about the Map<String,Object> to store a JSON result. I hope this isn't a silly question - I tried to implement your answer (using the List<Map<String, Object>> getCurrencies() apex method, and not using the getCurrencies.js file, which I presume it replaces) and am now getting an empty selector that is not displaying any options :( Do you know why this might be? The component is exposed, and is saving/deploying with no error, but the selector is still not displaying anything.
    – ElTttt
    Nov 13, 2022 at 0:11
  • @ElTttt Edit your question to include the latest code, then mention me @sfdcfox and I'll take a look.
    – sfdcfox
    Nov 13, 2022 at 0:42
  • Thanks a million @sfdcfox have updated the code now
    – ElTttt
    Nov 13, 2022 at 0:56
  • @ElTttt Nothing immediately pops out, but let me play with this in a dev org. I'll get back to you.
    – sfdcfox
    Nov 13, 2022 at 2:15
  • @ElTttt Spoke too soon. You put the @AuraEnabled on the class, not the method. Change that, and you should be good.
    – sfdcfox
    Nov 13, 2022 at 2:16

You must log in to answer this question.

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