Get the data source and assign values to the drop-down radio component

1. Usage scenarios

When we use a third-party interface to obtain data, we want to process the obtained data into the option value of the drop-down radio component, select and submit the data.

2. Video Display

此处为语雀视频卡片，点击链接查看：0707-获取数据源给下拉单选组件赋值(2).mov

3. Implementation steps

3.1 obtain data

Use a third-party interface to obtain data. Here, we create a form and use the page data source interface to obtain data.

Add a remote data source to the data source and call the search form instance details List interface based on criteria

For more information, see:YIDA platform interface (page data source can be called directly)

The interface configuration is as follows:

3.2 The data returned by the request is processed in the didFetch function.

Because the format of the drop-down radio component assignment is [{"label":"123", "text":"123","value":"123"}],If the value is inconsistent with the text value, keep the label value consistent with the text value,Therefore, we need to process data into the following format

Reference code is as follows

function didFetch(content) {
  const value = [];
  const data = content.data.map((item) => {
    let arr = {
      label: item.formData.textField_kpp4qy45,
      text: item.formData.textField_kpp4qy45,
      value: item.formData.textField_kpp4qy45,
    }
    value.push(arr);
    console.log(arr);
  })
  
  return value;
}

3.3 assign values to the drop-down radio component

When the form page is loaded, load the data source to obtain the processed data res and assign res to the DataSource of the drop-down radio component.

3.4 display effect

4. Try it online

• https://www.aliwork.com/bench/coe? tplUuid=TPL_YTLXP2QNVPYFLFQ3FND6

YIDA in order to better optimize the content and quality of YIDA user manual, it takes you 3-5 minutes to fill in the document feedback questionnaire. The document feedback questionnaire is submitted anonymously, and the questionnaire information is only used for YIDA document experience feedback collection. Thank you for your support for YIDA!

Click here to fill in the questionnaire

-------------------- Get the latest information YIDA, welcome to follow US--------------------