Autocomplete与Axios：Rails与前端表单的数据适配难题

你在整合Materialize Autocomplete和Rails后端时遇到的格式不匹配问题很常见，刚好有两个高效的解决方案，完全不用纠结低效循环的问题：

方案1：让后端直接输出符合要求的格式 #

既然Materialize需要的是{ "名称": null }这种键值对对象，我们可以在Rails控制器里直接把查询结果转换成这种格式，前端拿到就能用：

def autocomplete_search
  towns = Town.select(:nom_commune).where("nom_commune ILIKE ?", "%#{params[:search]}%")
  # 一步转成Materialize需要的键值对哈希
  autocomplete_data = towns.index_by(&:nom_commune).transform_values { nil }
  render json: autocomplete_data
end

这里用到了两个ActiveRecord的内置方法：

• index_by(&:nom_commune)：把查询到的城镇数组转成以nom_commune为键的哈希
• transform_values { nil }：把哈希里的所有值替换成nil，完美匹配组件要求

对应的前端代码可以简化成：

.then(function (response) {
  instance.updateData(response.data); // 直接传入，无需任何转换
})

方案2：前端用原生API快速转换格式 #

如果不想动后端代码，用JavaScript原生的Object.fromEntries就能高效完成格式转换，这个方法是浏览器引擎优化过的，比手动循环快得多：

.then(function (response) {
  // 把后端返回的数组转成组件需要的键值对对象
  const formattedData = Object.fromEntries(
    response.data.map(item => [item.name, item.placeholder])
  );
  instance.updateData(formattedData);
})

原理很简单：

• 先用map把每个后端返回的对象转成[键, 值]的数组项
• 再用Object.fromEntries把这个二维数组直接转换成目标对象，一步到位

为什么这两种方法更高效？ #

• 后端方案：ActiveRecord的内置方法底层是经过性能优化的，比你手动写Ruby循环处理数组要高效得多
• 前端方案：Object.fromEntries是原生API，执行效率远高于手动for循环或forEach，代码也更简洁易读

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