I'm trying to create an multidimensional array with JS so that i can post some data with an Ajax call to PHP. It's probably very simple, but my knowledge of JS is very little regarding this specific thing...
Here's an JSFiddle with the code
what i want is some kind of array like this:
var data = {
bewaarnaam: 'bewaarnaam!',
rows: [{
row_1: [{
name: 'Row Name 1',
x: 450,
y: 250,
chest1: [{
counter: 1,
height: 5
}],
chest2: [{
counter: 2,
height: 3
}]
}],
row_2: [{
name: 'Row Name 2',
x: 650,
y: 550,
chest1: [{
counter: 1,
height: 8
}],
chest2: [{
counter: 2,
height: 4
}]
}],
}]
};
I'm trying to generate the object array with this piece of code:
function saveThis() {
var bewaarNaam = $("#bewaarplaatsName").val();
hide_overlay_save_name();
log("now where going to save everything with the name: " + bewaarNaam);
var dataRows = [{
'bewaarnaam': bewaarNaam
}];
$(".rows").each(function (i, obj) {
var row = $(obj);
var rowName = $(row).attr('name');
var chests = [];
$(".cv_chest", row).each(function (i2, obj2) {
chests[$(obj2).attr('id')] = [{
'counter': $(obj2).attr('chest_counter'),
'height': $(obj2).attr('chest_height')
}];
});
var rowData = [{
rowName: [{
'name': $(row).attr('name'),
'x': $(row).css('left'),
'y': $(row).css('top'),
'chests': chests
}]
}];
dataRows[$(row).attr('id')] = rowData;
});
log(dataRows);
log("sending data with ajax...");
$.ajax({
type: 'post',
cache: false,
url: '{{ url('
bewaarplaatsen / nieuw ') }}',
data: dataRows
}).done(function (msg) {
log("ajax success");
log(msg);
}).fail(function (msg) {
log("ajax error");
log(msg);
});
}
When i output the variable dataRows to the console, i get the following output:
[Object, row_1: Array[1], row_2: Array[1]]
0: Object
bewaarnaam: "Bewaar Naam!"
__proto__: Object
length: 1
row_1: Array[1]
0: Object
rowName: Array[1]
0: Object
chests: Array[0]
chest_1_1: Array[1]
0: Object
counter: "1"
height: "1"
__proto__: Object
length: 1
And so on...
If I log the variable with console.log(JSON.stringify(dataRows)); I get the following output:
[{
"bewaarnaam": "Bewaar Naam!"
}]
While if i execute the var data =... part ( first code block ) inside the console, and log the data to the console, i get the following output (i logged it again with the `JSON.stringify function for better readability):
{
"bewaarnaam": "Bewaar Naam!",
"rows": [{
"row_1": [{
"name": "Row Name 1",
"x": 450,
"y": 250,
"chest1": [{
"counter": 1,
"height": 5
}],
"chest2": [{
"counter": 2,
"height": 3
}]
}],
"row_2": [{
"name": "Row Name 2",
"x": 650,
"y": 550,
"chest1": [{
"counter": 1,
"height": 8
}],
"chest2": [{
"counter": 2,
"height": 4
}]
}]
}]
}
If I print_r the POST value in PHP, i get the following output:
Array
(
[undefined] =>
)
When i debug the Ajax request with Chrome, i can see that the Form Data got 2 undefineds:
Form data
undefined:
undefined:
So if I understand it right, is the object not created properly, and therefore, it isn't properly send with Ajax. And because of that, PHP can't do anything with the post data...
So my question is pretty simple... What am i doing wrong / how do i fix this problem?