数组长度在 Javascript 中返回未定义 - Laravel + Vue

Posted 2023-03-14

【中文标题】数组长度在 Javascript 中返回未定义 - Laravel + Vue

【英文标题】：Array Length returns undefined in Javascript - Laravel + Vue

【发布时间】：2021-05-24 17:09:11

【问题描述】：

我正在使用Vue + Laravel 处理一个项目，其中我使用axios 请求AJAX 从控制器获取数据并将其显示在js 端，但是在使用嵌套for loop 时它不起作用并且我从 js 内部的循环中感觉到一些奇怪的行为。

下面是laravel controller中返回数据的函数：

public function show(Notebook $notebook)

    $pages = $notebook->pages()->get();
    $slotsPerPage = count($pages->first()->slots);
    $noOfPages = count($pages);
    $pageDeleted = session()->has('pageDeleted') ? session()->pull('pageDeleted') : null;

    return [
            'notebook' => $notebook, 'slotsPerPage' => $slotsPerPage, 'noOfPages' => $noOfPages,
            'pages' => $pages->chunk(4), 'pageDeleted' => $pageDeleted
           ];
  

在上面的代码中，我们可以看到 pages => $pages->chunk(4) 将返回一个记录数组，其中该数组中的每条记录将恰好包含 4 条记录，因此我在 js 端运行嵌套的 for loops 到第一个循环chunks 然后循环遍历块中的records，如下面的代码：

   for(var i=0; i < response.data['pages'].length; i++)
   
       for(var x = 0; x < response.data['pages'][i].length; x++)
       
           this.pages.push(response.data['pages'][i][x]);
       
     

在上面的代码中，假设pages => chunk(4) 总共返回了6 记录，这些记录分为两个块，第一个块包含4 记录，另一个块包含2 记录，所以在第一次迭代中外循环代码response.data['pages'][i].length应该返回4，这是第一个块的长度，在循环的第二次迭代中，相同的代码应该返回2作为length，因为它包含两条记录，但这里的问题是不是第二次迭代中的length返回undefined，并且只有4记录被推入this.pages数组中。

编辑：

当我console.log(response.data['pages']); 时，我看到了这个：

当我在外部循环中console.log(response.data['pages'][i].length); 时，我看到了这个：

我希望我解释得很好，任何帮助都提前表示感谢。

【问题讨论】：

那么您检查了response.data['pages'] 实际包含的内容吗？将其记录到控制台并检查它，以验证它实际上包含您认为的结构和数据。

@CBroe : 是的，我查过了，六个记录分两个块返回，第一个块包含四个记录，第二个包含两个记录，这里长度返回4 这是正确的但是在第二次迭代中，length 返回 undefined

您能否在控制台上显示实际的样子？

P.s.，这是什么意思？从外观上看，您将所有这些单独的页面推送到this.pages，因此结果将是一个平面数组（包含六个元素，没有您给定的示例编号） - 那么您为什么要在第一个中分块数据地点？

@CBroe ：我正在分块记录，因为我需要它们作为其他页面中的块，但我应该能够从这里的块中提取单行

【参考方案1】：

如果你在后端使用 Laravel，我建议使用 api 发送数据，我的意思是 api.php

你可以尝试只返回默认数据，然后在 response.data.pages 或 response.data-xxx 中进行过滤