Блог

Я пытаюсь создать многомерный массив с помощью JS, чтобы я мог отправлять некоторые данные с помощью вызова Ajax в PHP. Вероятно, это очень просто, но мои знания JS очень мало касаются этой конкретной вещи…

Вот JSFiddle с кодом

то, что я хочу, это какой-то массив, подобный этому:

 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
            }]
        }],
    }]
};
 

Я пытаюсь сгенерировать массив объектов с помощью этого фрагмента кода:

 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);
    });
}
 

Когда я выводю переменную dataRows на консоль, я получаю следующий вывод:

 [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
 

И так далее…
Если я регистрирую переменную с console.log(JSON.stringify(dataRows)); помощью, я получаю следующий вывод:

 [{
    "bewaarnaam": "Bewaar Naam!"
}]
 

Хотя, если я выполняю var data =... часть (первый блок кода) внутри консоли и записываю данные в консоль, я получаю следующий вывод (я снова зарегистрировал его с помощью функции `JSON.stringify для лучшей читаемости):

 {
    "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
            }]
        }]
    }]
}
 

Если я print_r ввожу POST значение в PHP, я получаю следующий вывод:

 Array
(
    [undefined] => 
)
 

Когда я отлаживаю Ajax-запрос с помощью Chrome, я вижу, что Form Data получено 2 undefineds :

 Form data
undefined:
undefined:
 

Итак, если я правильно понимаю, объект создан неправильно, и, следовательно, он неправильно отправляется с помощью Ajax. И из-за этого PHP ничего не может сделать с данными post…

Итак, мой вопрос довольно прост… Что я делаю не так / как мне решить эту проблему?

Вы смешиваете массивы и объекты. В javascript, если вы используете {key:value} , вам нужен объект, а не массив. Если вы хотите [value,value,value] , это массив. Когда x=[{}] вы говорите, что на самом деле создаете объект внутри массива, но затем вы устанавливаете свойства в массиве (массивы тоже являются объектами), а не в правильном объекте.

Скорее всего, вы хотите просто использовать объекты везде и избавиться от всех массивов:

http://jsfiddle.net/k5Q3p/1/

 var dataRows = {
    'bewaarnaam': bewaarNaam,
    rows:{}
};

$(".rows").each(function (i, obj) {
    var row = $(obj);
    var rowName = $(row).attr('name');
    var chests = {};

    $(".cv_chest", row).each(function (i2, obj2) {
        log("another chest with id: "   $(obj2).attr('id'));
        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.rows[$(row).attr('id')] = rowData;
});
 

который создает структуру, подобную

 {
  "bewaarnaam": "Bewaar Naam!",
  "rows": {
    "row_1": {
      "rowName": {
        "name": "Rij 1",
        "x": "30px",
        "y": "120px",
        "chests": {
          "chest_1_1": {
            "counter": "1",
            "height": "3"
          },
          "chest_1_2": {
            "counter": "2",
            "height": "3"
          },
          "chest_1_3": {
            "counter": "3",
            "height": "3"
          },
          "chest_1_4": {
            "counter": "4",
            "height": "3"
          },
          "chest_1_5": {
            "counter": "5",
            "height": "3"
          }
        }
      }
    },
    "row_2": {
      "rowName": {
        "name": "Rij 2",
        "x": "30px",
        "y": "200px",
        "chests": {
          "chest_2_1": {
            "counter": "1",
            "height": "6"
          },
          "chest_2_2": {
            "counter": "2",
            "height": "6"
          },
          "chest_2_3": {
            "counter": "3",
            "height": "6"
          },
          "chest_2_4": {
            "counter": "4",
            "height": "6"
          }
        }
      }
    }
  }
}