Câu hỏi tạo đối tượng / mảng động đa chiều


Tôi đang cố gắng tạo một mảng đa chiều với JS để tôi có thể đăng một số dữ liệu bằng một cuộc gọi Ajax tới PHP. Nó có lẽ rất đơn giản, nhưng kiến ​​thức của tôi về JS là rất ít liên quan đến điều cụ thể này ...

Đây là một JSFiddle với mã

những gì tôi muốn là một số loại mảng như thế này:

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

Tôi đang cố gắng tạo mảng đối tượng với đoạn mã này:

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

Khi tôi xuất biến dataRows với giao diện điều khiển, tôi nhận được kết quả sau:

[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

Và cứ thế ... Nếu tôi đăng nhập biến với console.log(JSON.stringify(dataRows)); Tôi nhận được kết quả sau:

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

Trong khi nếu tôi thực thi var data =... một phần (khối mã đầu tiên) bên trong giao diện điều khiển và đăng nhập dữ liệu vào giao diện điều khiển, tôi nhận được kết quả sau (tôi đã ghi lại nó bằng hàm `JSON.stringify để dễ đọc hơn):

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

Nếu tôi print_r các POST giá trị trong PHP, tôi nhận được kết quả sau:

Array
(
    [undefined] => 
)

Khi tôi gỡ lỗi yêu cầu Ajax bằng Chrome, tôi có thể thấy rằng Form Data  có 2 undefineds:

Form data
undefined:
undefined:

Vì vậy, nếu tôi hiểu nó đúng, là đối tượng không được tạo đúng cách, và do đó, nó không được gửi đúng với Ajax. Và vì lý do đó, PHP không thể làm gì với dữ liệu bài đăng ...

Vì vậy, câu hỏi của tôi là khá đơn giản ... Tôi đang làm gì sai / làm thế nào để tôi khắc phục vấn đề này?


8
2018-06-24 08:14


gốc




Các câu trả lời:


Bạn đang trộn mảng và đối tượng. Trong javascript, nếu bạn đang sử dụng {key:value}, bạn muốn một đối tượng hơn là một mảng. Nếu bạn muốn [value,value,value] đó là một mảng. Khi bạn nói x=[{}] bạn đang thực sự tạo một đối tượng phía trong một mảng, nhưng sau đó bạn đang thiết lập các thuộc tính trên mảng (mảng là các đối tượng quá), chứ không phải trong đối tượng chính xác.

Điều bạn có thể muốn là chỉ sử dụng các đối tượng ở khắp mọi nơi và loại bỏ tất cả các mảng:

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

tạo ra một cấu trúc như

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

4
2018-06-24 11:40



Cảm ơn nhiều! Như đã nói ở trên, tôi có ít kiến ​​thức về Js nên tôi không biết mình đang làm rối tung các đồ vật và mảng. Cảm ơn bạn đã chỉ ra điều đó cho tôi và cung cấp bản sửa lỗi. Chúc một ngày tốt đẹp! - Mathlight