Question

我正在尝试使用JS创建一个多维数组，以便我可以通过对PHP的Ajax调用发布一些数据。它可能非常简单，但我对JS的知识对于这个具体的事情却很少......

我想要的是某种类似的数组：

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 PHP中的POST值，我会得到以下输出：

Array
(
    [undefined] => 
)

当我使用Chrome调试Ajax请求时，我可以看到Form Data得到2 undefineds：

Form data
undefined:
undefined:

因此，如果我理解正确，对象是否未正确创建，因此，无法使用Ajax正确发送。因此，PHP无法对发布数据做任何事情......

所以我的问题很简单......我做错了什么/如何解决这个问题？

Answer 1

您正在混合数组和对象。在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" } } } } } }

创建动态多维对象/数组

1 个答案: