如何映射对象多组数据？JavaScript map方法报错求助

咱们来一步步搞定这个问题：

首先先看你的语法错误：你在 ', name: ' 后面直接写了 data.map，这里少了一个连接用的 + 号，但这只是表面问题——更大的问题是你的实现思路不符合需求，你现在是把所有id拼成一个大字符串、所有name拼成另一个大字符串，再把这两个字符串拼接，最后用 <br> 分割，这根本没法实现「每个id对应单个name」的效果。

正确实现代码 #

推荐用ES6模板字符串（更简洁易读）：

return data.map(obj => `id: ${obj.group.id}, name: ${obj.name}`).join('<br>');

如果你的运行环境不支持模板字符串，用传统字符串拼接也可以：

return data.map(obj => 'id: ' + obj.group.id + ', name: ' + obj.name).join('<br>');

为什么你的原写法不对？ #

你的原代码逻辑是：

1. 把所有 obj.group.id 提取成数组 [2,4,6,3]，转成字符串后是 "2,4,6,3"
2. 把所有 obj.name 提取成数组 ["monkey","cat","snake","elephant"]，转成字符串后是 "monkey,cat,snake,elephant"
3. 拼接成 "id:2,4,6,3, name:monkey,cat,snake,elephant"，再用 <br> 分割——这显然不是你要的「每个id对应一个name」的结构。

而正确的逻辑是：对数组里的每一个对象，都单独生成一条 id: X, name: Y 的字符串，最后把这些独立的字符串用 <br> 连接起来，这样就完美得到了你想要的输出。

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