How to pass foreach data to ajax - php

Question

I have stored two JSON arrays in local storage i.e,
viewbody=>json data1 , viewcollar=>json data2. I am fetching these arrays in foreach loop from local storage with data name attribute dynamically. But am not able to pass two arrays data to php ajax. Kindly help me, someone.
Below is my code,
$(document).on('click','.startDesignbtn', function() {
var product_id = $(this).data("id");
$(".getoption").each(function(){
var option_name = $(".getoption").data("name");
// alert(option_name);
var views = localStorage.getItem("view"+option_name);
});
$.ajax({
url: 'index.php?route=product/design/designMultiImage',
type: 'post',
//dataType: 'text',
data:{
'product_id': product_id,
'views' : views,
},
success: function(data) {
alert(data);return false;
var intValArray = data.split(',');
var count = 0;
$.each(intValArray,function(i){
localStorage.setItem("view_"+count,intValArray[i]);
count++;
});
localStorage.setItem('design-image',data);
localStorage.setItem('parent-id',product_id);
// var custom_link = data;
window.location = "<?php echo $customize_link;?>";
}
});
});

Answer 1

Use array.push() to append values to an array. Also, you need to define the array outside of the each loop otherwise you reset it every time. Also, inside the loop, use $(this) as opposed to targeting the element by class. Fixed your click function below:
$(document).on('click','.startDesignbtn', function() {
var product_id = $(this).data("id");
var views = [];
$(".getoption").each(function(){
var option_name = $(this).data("name");
// alert(option_name);
views.push("view"+option_name);
});
$.ajax({
url: 'index.php?route=product/design/designMultiImage',
type: 'post',
//dataType: 'text',
data:{
'product_id': product_id,
'views' : views,
},
success: ...