I am working on a project using Vue + Laravel where I use axios for AJAX requests to get data from controllers and display it on the js end but while using nested for loop it does not work and I feel some strange behavior from the loop inside js.
Below is the function in laravel controller that returns data:
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
];
}
In the above code we can see that pages => $pages->chunk(4) that will return an array of records where each record in this array will contain exactly 4 records therefore I am running nested for loops in the js end to first loop through the chunks and then loop through the records in the chunks like the code below:
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]);
}
}
In the above code suppose the pages => chunk(4) returned 6 records in total which are divided into two chunks where the first chunk contains 4 records and the other chunk contains 2 records so in the first iteration of the outer loop the code response.data['pages'][i].length should return 4 which is the length of the first chunk and in the second iteration of the loop the same code should return 2 as the length because it contains two records but here the issue is that the length in the second iteration returns undefined and only 4 records are pushed into the this.pages arrray.
Edit:
When I console.log(response.data['pages']);, I see this:
When I console.log(response.data['pages'][i].length); inside the outer loops, I see this :
I hope I explained it well, any help is appreciated in advance.

