无法在映射数组中找到正确的值

Question

这是我的代码：

               <tbody>
                  @foreach ($meals as $keys=>$meal)
                      <tr>
                        <td>{{$keys+1}}</td>
                        <td>{{$meal->date}}</td>
                        @php
                          $detailsmeals= json_decode($meal->mealdetails);                                            
                        @endphp
                        @for ($i = 0; $i < count($detailsmeals->breakfasts); $i++)
                            <td class="breakfast text-center table-primary">{{$detailsmeals->breakfasts[$i]}}</td>
                            <td class="lunch text-center table-info">{{$detailsmeals->lunchs[$i]}}</td>
                            <td class="dinner text-center table-secondary">{{$detailsmeals->dinners[$i]}}</td>                       
                        @endfor              
                      </tr>
                      
                  @endforeach
                  <script>
                    const tbody = document.querySelector('table tbody');
                    const outputArray = () => Array.from(tbody.querySelectorAll('tr')).map(tr => ({
                              break: tr.querySelector('.breakfast').innerText,
                              lunch: tr.querySelector('.lunch').innerText,
                              dinner: tr.querySelector('.dinner').innerText
                          }));
                    console.log(outputArray());
              </script>
                </tbody>

我的输出是：只有每行的第一个休息，午餐，晚餐数组，我怎样才能找到每行的所有休息，午餐，晚餐数组值，请帮助我。

Answer 1

代码的问题是因为您使用的是

querySelector()

，当您需要在目标

tr

中选择具有相同类的多个元素时，它仅返回单个元素。

要解决此问题，您可以使用与选择

tr

本身相同的模式，即。使用

querySelectorAll()

获取行内的所有目标元素，然后

map()

将其转换为包含所需内容的数组。以下是如何执行此操作的工作示例：

const tbody = document.querySelector('table tbody');
const outputArray = () => [...tbody.querySelectorAll('tr')].map(tr => ({
  break: [...tr.querySelectorAll('.breakfast')].map(b => b.innerText),
  lunch: [...tr.querySelectorAll('.lunch')].map(l => l.innerText),
  dinner: [...tr.querySelectorAll('.dinner')].map(d => d.innerText)
}));
console.log(outputArray());

<table>
  <tbody>
    <tr>
      <td>1</td>
      <td>Foo</td>
      <td class="breakfast text-center table-primary">1</td>
      <td class="lunch text-center table-info">2</td>
      <td class="dinner text-center table-secondary">3</td>
      <td class="breakfast text-center table-primary">4</td>
      <td class="lunch text-center table-info">5</td>
      <td class="dinner text-center table-secondary">6</td>
      <td class="breakfast text-center table-primary">7</td>
      <td class="lunch text-center table-info">8</td>
      <td class="dinner text-center table-secondary">9</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Bar</td>
      <td class="breakfast text-center table-primary">9</td>
      <td class="lunch text-center table-info">8</td>
      <td class="dinner text-center table-secondary">7</td>
      <td class="breakfast text-center table-primary">6</td>
      <td class="lunch text-center table-info">5</td>
      <td class="dinner text-center table-secondary">4</td>
      <td class="breakfast text-center table-primary">3</td>
      <td class="lunch text-center table-info">2</td>
      <td class="dinner text-center table-secondary">1</td>
    </tr>
  </tbody>
</table>

请注意使用扩展选择器 (

[...obj]

) 来构建数组，而不是

Array.from()

。两者都可以，只是前者稍微不那么冗长。

如果创建 HTML 的服务器端逻辑与问题无关（因为 Laravel 不属于这种情况），请注意供将来参考，如果您只粘贴 HTML 输出，那么对于那些尝试诊断问题的人来说会简单得多.