后端返回字典数据为const dict = [ {code:1,value:'适用对象1'}, {code:2,value:'适用对象2'}, ],前端如将字典数据做成下拉选项框,如果后端返回code为1,如何在页面上显示适用对象1
时间: 2024-02-15 11:05:51 浏览: 113
可以在前端使用 JavaScript 的数组方法来处理后端返回的字典数据,将其转换为一个对象,以便在页面上根据 code 显示对应的 value 值。具体实现可以参考以下代码:
```javascript
const dict = [
{code:1,value:'适用对象1'},
{code:2,value:'适用对象2'}
];
// 将字典数据转换为对象
const dictObj = dict.reduce((obj, item) => {
obj[item.code] = item.value;
return obj;
}, {});
// 在页面上根据 code 显示对应的 value
const code = 1; // 假设后端返回 code 为 1
const value = dictObj[code]; // 获取对应的 value 值
console.log(value); // 输出:适用对象1
```
在页面上显示下拉选项框时,可以使用 HTML 的 `<select>` 标签和 JavaScript 的 `for...in` 循环来遍历字典数据,生成对应的 `<option>` 标签,代码如下:
```html
<select id="dict-select"></select>
```
```javascript
const selectEl = document.getElementById('dict-select');
for (const code in dictObj) {
const optionEl = document.createElement('option');
optionEl.value = code;
optionEl.textContent = dictObj[code];
selectEl.appendChild(optionEl);
}
```
这样就可以将后端返回的字典数据做成下拉选项框,并在页面上显示对应的 value 值了。
阅读全文