How to pass an array from laravel to ajax - php

Question

I have an array of fonts which i displaying in the page using blade templates #foreach like this
#foreach($data as $fonts)
<li class="abc">
<div class="am-actions"><span><i class="icon add"></i></span></div>
Grumpy wizards make toxic brew for the evil Queen and Jack.
</div>
<div class="am-font-details">
<div class="am-font-name">{!! $fonts['font_name'] !!}</div>
<div><?php echo $count = count($fonts['variants']); ?> Styles</div>
</div>
<div class="am-font-options">
<h4>SELECT VARIANTS TO INCLUDE:</h4>
<ul>
#foreach($fonts['variants'] as $variants)
<li><label><input type="checkbox">
{{ $variants }}
</label></li>
#endforeach
</ul>
<h4>LANGUAGE/SCRIPT TO INCLUDE:</h4>
<ul>
#foreach($fonts['subsets'] as $subsets)
<li><label><input type="checkbox">{{ $subsets }} </label></li>
#endforeach
</ul>
</div>
</li>
#endforeach
as you can see i use #foreach for variants and languages inside the main loop the variants and langauges is listed with checkbox so the user can selected their choice and add. on the add the selected variants and languages with the main font array details should be passed through ajax please help me :-(

Answer 1

Since this an ajax question this belongs to Jquery section.
Anyway you can't use ul tag inside li tag. so I made some changes to your html code. I hope this what you need(change php variables appropriately)
/**
* Blade File
**/
#foreach($data as $fonts)
<div class="abc">
<div class="am-actions">
<span><i class="icon add"></i></span>
</div>
Grumpy wizards make toxic brew for the evil Queen and Jack.
</div>
<div class="am-font-details">
<div class="am-font-name">{!! $fonts['font_name'] !!}</div>
<div><?php echo $count = count($fonts['variants']); ?> Styles</div>
</div>
<div class="am-font-options">
<h4>SELECT VARIANTS TO INCLUDE:</h4>
<ul>
#foreach($fonts['variants'] as $variant)
<li><label><input type="checkbox" name="variant" value="{{$variant->id}}">{{ $variant->name }}</label></li>
#endforeach
</ul>
<h4>LANGUAGE/SCRIPT TO INCLUDE:</h4>
<ul id="subsets">
#foreach($fonts['subsets'] as $subsets)
<li><label><input type="checkbox" name"subset">{{ $subsets }} </label></li>
#endforeach
</ul>
</div>
</div>
#endforeach
/**
* Jquery
**/
$(document).on('change', 'input[name=varient], input[name=subset]', function(){
if($('input[name=varient]:checked').length > 0 && $('input[name=subset]:checked').length > 0){
var variants = [];
var subsets = [];
$('input[name=varient]:checked').each(function(index, element){
varients.push($(element).val());
});
$('input[name=subset]:checked').each(function(index, element){
subsets.push($(element).val());
});
$.ajax('<route-to-controller-method>', {
type : 'POST',
data : {
'varients' : variants,
'subsets' : subsets
}
});
}
});