I am rendering a dynamic form using JS and API calls now if I use then chaining it render form but not in same order I want, and my current code show failed to execute append child and return [object Promise] instead of form I try many ways to render but it does not render anything other method I use to resolve promises still no result.
The below is my current code it still shows same error:
createSelectComponent: async function (
form,
labelTextContent,
defaultSelectTextContent,
id,
name,
apiEndpoint
) {
const label = document.createElement("label");
form.appendChild(label);
const select = document.createElement("select");
select.id = id;
select.name = name;
try {
const response = await fetch(apiEndpoint);
const parsedResponse = await response.json();
const data =
parsedResponse.categories ||
parsedResponse.brands ||
parsedResponse.users;
data.forEach((object) => {
const option = document.createElement("option");
option.value = object.id || object.userId;
option.textContent =
object.categoryObjName ||
object.brandObjName ||
object.userName;
select.appendChild(option);
});
} catch (error) {}
form.appendChild(select);
return form;
},
createForm: async function (e) {
const form = document.createElement("form");
try {
const brandSelectComponent = await this.createSelectComponent(
form,
"Select Brand:",
"Select Brand",
"brandSelect",
"brand",
"/get-brands"
);
form.appendChild(brandSelectComponent);
} catch (error) {
console.error(error);
}
try {
const categorySelectComponent = await this.createSelectComponent(
form,
"Select Category:",
"Select Category",
"categorySelect",
"category",
"/get-categories"
);
form.appendChild(categorySelectComponent);
} catch (error) {
console.error(error);
}
// User select goes here
return form;
},