Passing Array of arrays to controller from Ajax

Question

I have some problems. First, i want to store my data to array of arrays collection. and then pass data to controller submit. Here is my code

Ajax.php

$("#submit").click(function() {
    var total = 3;
    var photos = new Array();

    for(var i = 0; i < total; i++)
    {
     photos[i] = $('#thumbnail'+i+'').children('img').attr('src');
     var collection = {
        'no' : i,
        'photo' : photos[i]
     };

    }

    $.ajax({ 
        type: "POST",
        url: "<?php echo base_url()?>create/submit",
        data: {collection : collection},
        cache: false,
        success: function(response)
        {
           console.log(response);
           alert('success');
           window.location = '<?php echo base_url()?>create/submit';

        }
    });

}); 

[EDIT]

Controller

function submit()

      $collection = $this->input->post('collection');

      print_r($collection);

      if(is_array($collection)) {
          foreach ($collection as $collect) {
           echo $collect['no'];
           echo $collect['photo'];
          }
       }
       else
       {
           echo 'collection is not array!';
       }
}

RESULT

collection is not array!

Based on PeterKa solution, i got this in my console in Console

Array
(
[0] => Array
    (
        [no] => 0
        [photo] => https://scontent.cdninstagram.com/hphotos-xap1/t51.2885-15/s320x320/e15/11176494_1106697872689927_2104362222_n.jpg
    )

[1] => Array
    (
        [no] => 1
        [photo] => https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/s320x320/e15/11376044_838742186174876_410162115_n.jpg
    )

[2] => Array
    (
        [no] => 2
        [photo] => https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s320x320/e15/11381470_878168042272606_1132736221_n.jpg
    )

)

But, Result in my controller didn't as expected.

Answer 1

The collection variable is local to the loop and does not hold all the data you iterate through. Instead try something like this, although you don't really need an object to stop the index and src -- a plain 1D array would do:

$("#submit").click(function() {
    var total = 3;
    var photos = new Array();
    for(var i = 0; i < total; i++)
    {
         var collection = {
            'no' : i,
            'photo' : $('#thumbnail'+i+'').children('img').attr('src')
        };
        photos.push( collection );
    }
    $.ajax({ 
        type: "POST",
        url: "<?php echo base_url()?>create/submit",
        data: {collection : photos},
        cache: false,
        success: function(response)
        {
            console.log(response);
            alert('success');
            window.location = '<?php echo base_url()?>create/submit';
        }
    });
}); 

The data you send is in the form:

photos = [
    {
        "no": 1,
        "photo":"this is a link"
    }, 
    {
        "no": 2,
        "photo":"this is a link"
    },
    {
        "no": 3,
        "photo":"this is a link"
    }
]

Answer 2

You have add thumbnail as class for all <a>. Then change the code like this :

$("#submit").click(function () {
        var total = 3;
        var photos = new Array();
        $('.thumbnail').each(function (i) {
            photos.push($(this).attr("src"));
        });
        $.ajax({
            type: "POST",
            url: "<?php echo base_url() ?>create/submit",
            data: {'collection': photos},
            cache: false,
            success: function (response)
            {
                console.log(response);
                alert('success');
                window.location = '<?php echo base_url() ?>create/submit';

            }
        });

    });