How to populate dropdown options dynamically using a promise

Question

import { getCustomer } from './Customers';
let optionItems=[];

export const LOV: React.FunctionComponent = () => {
  const loadCustomer = async () => {
  const data = await getCustomer();
  for (var i=0; i < data.value.length ; ++i)
  {
   optionItems.push({
    key: data.value[i].CustomerId,
    text: data.value[i].CustomerName
  });
 }
}
useEffect(() => {
 loadCustomer();
}, [])

return (
  <SearchableDropdown options={optionItems}/>    
);};

Code in Customers.tsx

export const getCustomer = async (): Promise<any> => {
const response = await 
$.ajax({
    url: apiURL,
    type: "GET",
    headers: headers,
    data: null,
    cache: false,
    beforeSend: function (request) {
      request.setRequestHeader("Authorization", 'Bearer ' + accessToken); 
    }
})
.done( function (data) {
    return data;
})
.fail(function (jqXHR) {
    if (jqXHR.status == 401) {
        promptAuth(jqXHR.getResponseHeader("WWW-Authenticate"));
    } 
    else {
        console.log("NOT 401");
    }
});  
return response;
}

I'm trying to populate a dropdown dynamically using a promise. I'm using Fluent-react Dropdown. getCustomer() loads values to const data. However, I can't see any values in the dropdown even though data is not null. Please help.

Fluent Dropdown => https://developer.microsoft.com/en-us/fluentui#/controls/web/dropdown

score 3 · Accepted Answer · answered Jul 26 '22 at 10:49

3

Your optionsItems need to be reactive. Try using useState-hook

export const LOV: React.FunctionComponent = () => {
  const [optionItems, setOptionItems] = useState([]);
  const loadCustomer = async () => {
  const data = await getCustomer();
  const options = [];
  for (var i=0; i < data.value.length ; ++i)
  {
   options.push({
    key: data.value[i].CustomerId,
    text: data.value[i].CustomerName
  });
 }
 setOptionItems(options)
}
useEffect(() => {
 loadCustomer();
}, [])

return (
  <SearchableDropdown options={optionItems}/>    
);};

answered Jul 26 '22 at 10:49

Stutje

745
6
21

Hi, I tried this solution. Now the whole page is blank and I'm getting this error: TypeError: Cannot read properties of null (reading 'toLowerCase'). Do you know why? :( – Intern Jul 26 '22 at 11:03
Post the whole code where ` TypeError: Cannot read properties of null (reading 'toLowerCase')` happend – Teshie Ethiopia Jul 26 '22 at 11:14
I didn't use toLowerCase anywhere in the code. I updated the question to show getCustomer(). These files do not contain any other code – Intern Jul 26 '22 at 11:27
@Intern is your customerId null or undefined? It needs to be a string value – Stutje Jul 28 '22 at 13:58
Hi @Stuje I tried your solution after stringifying the data and it worked! thank you so much!! since I entered [ text: JSON.stringify(data.value[i].CustomerName) ] all the values in the dropdown are seen inside a double quotation mark ( "Customer name"). Do you know how to fix that? – Intern Jul 29 '22 at 02:15
2

const stringWithQuotes = "\"text\"" const stringWithoutQuotes = stringWithQuotes.replaceAll("\"", "") Note that with this approach even when you will try to use " in your string, it will get replaced – deaponn Jul 29 '22 at 07:48
Hi @deaponn, I tried JSON.stringify(data.value[i].CustomerName.replaceAll("\"", "")). But it didn't work. i tried JSON.stringify(data.value[i].CustomerName).replaceAll("\"", "") and got errors :( please help – Intern Aug 02 '22 at 04:36
You need to follow the instructions carefully: first get the string from your object like so: const stringWithQuotes = data.value[i].CustomerName, then continue as above. There is no need to use JSON.stringify for strings, as data.value[i].CustomerName is a string already. By the way this is why you have quotes around your words. Just use
{data.value[i].CustomerName}
and not
{JSON.stringify(data.value[i].CustomerName)}
– deaponn Aug 02 '22 at 06:44
Hi I can't use
tags inside as it conflicts with fluent IDropdownOptions. I tried `${data.value[i].CustomerName}` and it worked! thank you all for your suggestions :)
– Intern Aug 04 '22 at 17:01

score 2 · Answer 2 · answered Jul 26 '22 at 11:41

Please make sure your data.value[i].CustomerId and data.value[i].CustomerName are valid strings. You need to supply string, but it looks like your API call returns null there. After you fix this problem, together with Stutje's solution your app should start to work.

How to populate dropdown options dynamically using a promise

2 Answers2