LWC - trying to create a combobox from JSON response

Question

(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:

{"code":"BTC","name":"Bitcoin","rate":1}

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

bitcoin2.html

<template>
  <lightning-card
    title="List of Contacts - Lightning Web Component"
    icon-name="custom:custom63"
  >
    <lightning-combobox
      name="currencies"
      label="Currencies"
      placeholder="Choose a currency"
      value={value}
      onchange={handleChange}
      options={statusOptions}
    >
    </lightning-combobox>
    Selected Rate: {selectedRate}
  </lightning-card>
</template>

bitcoin2.js

import { LightningElement } from "lwc";

export default class BitCoin2 extends LightningElement {
  //bitcoin_rates;
  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;
  }
}

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:

@AuraEnabled(cacheable=true)
public static String getCurrencies() {
  Http http = new Http();
  HttpRequest request = new HttpRequest();
  request.setEndpoint('https://bitpay.com/api/rates');
  request.setMethod('GET');
  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.

Demo.