Array Length returns undefined in Javascript - Laravel + Vue

Viewed 280

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:

Pages

When I console.log(response.data['pages'][i].length); inside the outer loops, I see this :

Length

I hope I explained it well, any help is appreciated in advance.

1 Answers

if you use Laravel in backend i recemmend use api for send the data, i mean api.php

Can you try with return only the data for default, and later make filter in response.data.pages or response.data-xxx

Related