动态创建多维对象/数组

Posted 2023-02-22

【中文标题】动态创建多维对象/数组

【英文标题】：creating dynamically multidimensional object / array

【发布时间】：2014-08-14 09:57:57

【问题描述】：

我正在尝试使用 JS 创建一个多维数组，以便我可以通过对 php 的 Ajax 调用发布一些数据。这可能很简单，但是我对JS的了解很少涉及到这个具体的东西......

Here's an JSFiddle with the code

我想要的是某种像这样的数组：

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
            ]
        ]
    ]

如果我在 PHP 中 print_r POST 值，我会得到以下输出：

Array
(
    [undefined] => 
)

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

Form data
undefined:
undefined:

所以，如果我理解正确的话，是不是该对象没有正确创建，因此，它没有通过 Ajax 正确发送。正因为如此，PHP 不能对发布的数据做任何事情......

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

【参考方案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"
          
        
      
    
  

【讨论】：

非常感谢！如前所述，我对 Js 知之甚少，所以我不知道我在搞砸对象和数组。感谢您为我指出这一点并提供修复。祝您有愉快的一天！