映射数组取值异常：如何获取表格每行全部早午晚餐数据？

错误原因 #

当前代码存在两个核心问题：

• JavaScript中使用querySelector仅能匹配每行内第一个对应类的元素，因此只能获取到第一组早午晚餐数据；
• 若某行中breakfasts、lunchs、dinners数组长度不一致，或DOM中找不到对应元素时，querySelector会返回null，访问innerText会触发报错，导致数组映射失败，出现“Cannot find proper value in mapped array”提示。

解决方案 #

1. 修正JavaScript逻辑，获取所有组数据 #

修改页面内的<script>代码，改为获取每行内所有对应类的元素，按索引配对成完整的餐食数据数组：

const tbody = document.querySelector('table tbody');
const outputArray = () => Array.from(tbody.querySelectorAll('tr')).map(tr => {
  // 获取当前行所有早、午、晚餐的DOM元素，并提取文本
  const breakfasts = Array.from(tr.querySelectorAll('.breakfast')).map(el => el.innerText);
  const lunchs = Array.from(tr.querySelectorAll('.lunch')).map(el => el.innerText);
  const dinners = Array.from(tr.querySelectorAll('.dinner')).map(el => el.innerText);
  
  // 以最长数组的长度为基准，生成每组餐食的对象
  const maxLength = Math.max(breakfasts.length, lunchs.length, dinners.length);
  return Array.from({ length: maxLength }, (_, index) => ({
    break: breakfasts[index] || '',
    lunch: lunchs[index] || '',
    dinner: dinners[index] || ''
  }));
});
console.log(outputArray());

修改后，每行数据会返回一个数组，包含该行所有组的早午晚餐信息，而非仅第一组。

2. （可选）PHP层补全数组，避免长度不一致问题 #

为避免前端处理空值，可在PHP循环前确保breakfasts、lunchs、dinners三个数组长度一致：

@php
  $detailsmeals= json_decode($meal->mealdetails); 
  // 获取三个数组的最大长度
  $maxCount = max(count($detailsmeals->breakfasts), count($detailsmeals->lunchs), count($detailsmeals->dinners));
  // 用空字符串补全较短的数组，确保长度一致
  $detailsmeals->breakfasts = array_pad($detailsmeals->breakfasts, $maxCount, '');
  $detailsmeals->lunchs = array_pad($detailsmeals->lunchs, $maxCount, '');
  $detailsmeals->dinners = array_pad($detailsmeals->dinners, $maxCount, '');
@endphp

内容的提问来源于stack exchange，提问作者MD Meadul Islam