Populate Dropdown with API call on load

Forms Public Forms
1

I'm looking to do an API call on form load. I want to populate a dropdown with a list of project names then on select of the project name a second dropdown would be populated with a list of task names inside the project.

The call return for projects looks something like this:

{
"personid": 369465,
"status": "OK",
"code": 200,
"listcount": 28,
"project": [
{
"id": "1298760",
"name": "Admin",
"description": "

Admin time bucket for general administration work, emails, phone calls, meetings, monitoring, break-fix etc.

",
"datestart": "2022-09-26",
"dateend": null,
"alert_percent": "0",
"alert_date": null,
"active": "t",
"billable": "f",
"budget": null,
"clientid": "372058",
"client": "Data Services",
"clientlocalid": "17",
"labelid": null,
"label": null,
"labelcolor": null,
"label_order": null,
"localidunpadded": "207",
"localid": "00207",
"manager": "Tom Wolfenden",
"managerid": "371286"
},
{
"id": "1286239",
"name": "Azure Data Factory - change control (DevOps or GitHub)",
"description": "

Enable change control on the Azure environment.

",
"datestart": "2022-06-20",
"dateend": null,
"alert_percent": "0",
"alert_date": null,
"active": "t",
"billable": "f",
"budget": null,
"clientid": "372058",
"client": "Data Services",
"clientlocalid": "17",
"labelid": null,
"label": null,
"labelcolor": null,
"label_order": null,
"localidunpadded": "142",
"localid": "00142",
"manager": "Tom Wolfenden",
"managerid": "371286"
}
]
}

2

Hello @IT.Joe,

Do you want to make an API call to the Azure function? Please see this blog post for the instructions:

3

I'm actually just calling a API that I got to return just the below JSON. I can't seem to figure out how to get the Text of "Project" into the dropdown. Here is the JS and below that the JSON returned

fd.rendered(function() {

var url = "https:";

    var body = {Item:"Project"}

var widget = fd.field('Project').widget

    fetch(url, {
        method: 'POST',
        body: JSON.stringify(body),
        headers:{
        'Content-Type': 'application/json'
        }
    })
    .then ((response) => response.json())

.then((data) => widget.setOptions({dataTextField: data.Project, dataValueField: data.Project}));
});

[
{
"Project": "1099 Related - Owner Master Name Line 2, currently known as D/B/A line"
},
{
"Project": "2023 - Administrative Time"
},
{
"Project": "2023 Annual D/R Test"
},
{
"Project": "2023 - Support - BI / PI"
},
{
"Project": "2023 - Support - Other / Misc"
},
{
"Project": "2023 - Support - Payroll/Financial/Billing"
},
{
"Project": "2023 - Support Time: Driver interfaces - geotab/Transflo/photector/lytx/compdata/etc"
},
{
"Project": "2023 - Support - TMS: icc/tmt/tmmi/tr-trl detention/logistics/edi/etc"
},
{
"Project": "8x8 API Pull"
},
{
"Project": "99 cent fuel program changes - 35390"
}
]

4

@IT.Joe,

You must use this code to set the field options:

fd.field('DropDown').widget.dataSource.data(data.map(({
    Project
}) => ([Project])));