部分邮编查询API返回正常但datalist城市列表为空如何解决

问题根因 #

你遇到的问题核心出在PHP侧数组处理后的JSON序列化逻辑：

• PHP中asort()函数会保留数组的原始键名，当你调用array_unique()移除重复项后，原本连续的数字索引会出现断裂，比如原索引是0,1,2,3，去重后可能变成0,2,3
• 此时json_encode()不会把非连续索引的数组序列化为JS可识别的数组结构，而是会序列化为键值对对象，比如返回{"0":"Allouis","2":"Berry-Bouy","3":"Foëcy"}这种格式
• 前端拿到这个结果后JSON.parse()得到的是对象，没有length属性，循环条件i < citiesParse.length恒为false，自然不会生成任何option元素

另外你的代码还存在一个隐性问题：只有当输入长度不等于5的时候才清空datalist，如果用户连续输入两个不同的5位邮编，前一次查询的结果会一直残留在datalist中。

修复方案 #

1. 后端PHP修复（推荐优先修改） #

调用array_values()重置数组索引，保证序列化后是标准数组结构：

$uniqueNames = array_unique($names);
asort($uniqueNames);
// 新增一行重置数组索引，解决非连续索引导致的序列化异常
$uniqueNames = array_values($uniqueNames);
echo json_encode($uniqueNames);

2. 前端兼容修复（可选，增加鲁棒性） #

调整清空逻辑的位置，同时兼容非数组格式的返回结果：

this.zipcodeInput.addEventListener("input", () => {
    // 每次输入都先清空旧内容，避免不同邮编的结果叠加
    [...this.cityDatalist.childNodes].forEach(child => child.remove());
    if (this.zipcodeInput.value.length === 5) {
        this.loadCities(this.zipcodeInput.value).then(cities => {
            const citiesParse = JSON.parse(cities);
            // 兼容对象格式的返回，统一转成数组处理
            const cityList = Array.isArray(citiesParse) ? citiesParse : Object.values(citiesParse);
            for (let i = 0; i < cityList.length; i++) {
                const cityOption = document.createElement("option");
                cityOption.value = cityList[i];
                this.cityDatalist.appendChild(cityOption);
             }
        })
    }
});

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