如何在AJAX响应中用switch case将服务编码字符串转为对应名称展示

实现方法 #

你只需要在现有AJAX逻辑中新增编码映射和转换逻辑即可，具体操作如下：

1. 先建立服务编码和服务名称的映射关系，方便快速查询转换
2. 拿到接口返回的required_services字符串后，拆分为数组逐个转成对应服务名，再拼接为展示用的字符串

修改后的完整代码如下：

$(document).on('click', '#viewOrder', function(e) {
    e.preventDefault();
    let orderId = $(this).val();

    // 定义服务编码和名称的映射关系
    const serviceMap = {
        '1': 'Iron',
        '2': 'Dry Wash',
        '3': 'Wash'
    };

    $.ajax({
        type: "GET",
        url: "/getOrder/" + orderId,
        success: function(response) {
            console.log(response);
            $('#orderTablemodal tbody').html('');
            $.each(response.orderDetail, function(key, item) {
                // 转换服务编码为名称
                const serviceCodes = item.required_services.split(',');
                const serviceNames = serviceCodes.map(code => serviceMap[code] || '未知服务');
                const serviceShowText = serviceNames.join('、');

                $('#orderTablemodal tbody').append(
                    `<tr>
                        <td><b>Customer Phone No.</b></td>
                        <td>${item.phone}</td>
                    </tr>
                    <tr>
                        <td><b>Customer Name: </b> </td>
                        <td>${item.fname} ${item.lname}</td>
                    </tr>
                    <tr>
                        <td><b>E-mail: </b> </td>
                        <td>${item.email}</td>
                    </tr>
                    <tr>
                        <td><b>Location: </b></td>
                        <td>${item.area_name}, ${item.city_name}</td>
                    </tr>
                    <tr>
                        <td><b>Services :</b> </td>
                        <td>${serviceShowText}</td>
                    </tr>
                    <tr>
                        <td><b>Pay type: </b> </td>
                        <td>${item.pay_type}</td>
                    </tr>`
                );
            });
        }
    });
});

补充说明 #

• 映射对象serviceMap可以根据你后续新增的服务随时扩展，不需要修改转换逻辑
• 代码中加入了兜底逻辑|| '未知服务'，避免出现未定义的编码时页面显示undefined
• 这里用了ES6的模板字符串替换了原来的字符串拼接，可读性更好，如果你的运行环境不支持ES6，改回原来的加号拼接方式即可，转换服务名称的逻辑不变

内容的提问来源于stack exchange，提问作者Moshiul Gazi