Ajax如何将JavaScript对象数组渲染到视图中？

开发者阿泽

2026-8-12

问题分析与解决方案

错误原因

你在$.map的回调函数里犯了逻辑错误：$.map会遍历data数组的每一个元素，每次循环的object是数组里的单个对象（比如第一次是data[0]，第二次是data[1]），而非整个数组。当你试图访问object[1].name时，object是单个对象，根本不存在[1]这个索引，因此会抛出Cannot read properties of undefined (reading 'name')的错误。

当数组只有一个元素时，$.map仅遍历该元素，此时你可能误打误撞让object包含了name属性，所以代码能运行，但逻辑本身是错误的。

解决方案

你的需求是把data数组中两个对象的信息合并成一个渲染项，不需要用$.map遍历整个数组，直接从数组中取出对应元素的属性即可：

修改后的基础代码

// 替换原来的response部分
response([{
    label: data[0].product_name,
    value: data[0].product_id,
    price: data[0].price,
    name: data[1]?.name || '' // 用可选链避免data[1]不存在时报错
}]);

select: function (event, ui) {
    $('.product_name').val(ui.item.label);
    $('.price').val(ui.item.price);
    $('.product_id').val(ui.item.value);
    $('.name').val(ui.item.name);
    return false;
}

更鲁棒的写法（不依赖数组顺序）

如果控制器返回的数组元素顺序可能变化，你可以通过属性判断来定位对应的对象：

// 找到包含产品标识的对象
const product = data.find(item => item.product_id);
// 找到包含分类名称的对象
const category = data.find(item => item.name);

response([{
    label: product?.product_name || '',
    value: product?.product_id || '',
    price: product?.price || '',
    name: category?.name || ''
}]);