how to create multidimensional array / object in jquery and pass via AJAX post

Question

I am creating an order form that has a table of order items users can purchase. The inputs are using data attributes to store the items name and price per piece like so:

<input type="text" class="input-small quantity-input" data-pid="<?php echo $p['id']; ?>" data-min="<?php echo $p['min_qty']; ?>" data-max="<?php echo $p['max_qty']; ?>" data-price="<?php echo $p['price']; ?>" data-name="<?php echo $p['product_name']; ?>" placeholder="quantity...">

I have everything figured out except for how to iterate over each quantity-input item and add it to a multidimensional array that I can send via an AJAX Post. I currently have the following code, but when I do a print_r on the $_POST value it says: Disallowed Key Characters: Fresh Tilapia Filets

    $("#ccform").validate({
  rules: {
    firstName: { required: true },
    lastName: { required: true },
    email: {
        required: true,
        email: true,
    },
    cardNumber: { required: true },
    expMonth: { required: true },
    expYear: { required: true },
    cvv: { required: true },
    address: { required: true },
    city: { required: true },
    state: { required: true },
    zipcode: { required: true },
    phone: { required: true },
  },
  submitHandler: function() {
      var siteUrl = $('#siteUrl').val();
      var orderItems = [];
        $('.quantity-input').each(function(){
            var orderItem = $(this).attr('data-name');
            var priceEach = $(this).attr('data-price');
            var qty = $(this).val();
            if(qty != '') {
                obj = {};
                obj[orderItem] = orderItem;
                obj[priceEach] = priceEach;
                obj[qty] = qty;
                orderItems.push(obj);
            }
        });

        var pickupLocation = $('input[name="pickup"]:checked').val();
        var pickupPrice = $('#hidePickupPrice').val();
        var subtotal = $('#hideSubtotal').val();
        var tax = $('#hideTax').val();
        var total = $('#hideTotal').val();

        var firstName = $('#firstName').val();
        var lastName = $('#lastName').val();
        var email = $('#email').val();
        var cardNumber = $('#cardNumber').val();
        var expMonth = $('#expMonth').val();
        var expYear = $('#expYear').val();
        var cvv = $('#cvv').val();
        var address = $('#address').val();
        var address2 = $('#address2').val();
        var city = $('#city').val();
        var state = $('#state').val();
        var zipcode = $('#zipcode').val();
        var phone = $('#phone').val();

        $.ajax({
             type: "POST",
             url: siteUrl + "frontend/pay",
             data: ({ 'orderItems': orderItems, 'pickupLocation': pickupLocation, 'pickupPrice': pickupPrice, 'subtotal': subtotal, 'tax': tax, 'total': total, 'firstName': firstName, 'lastName': lastName, 'email': email, 'cardNumber': cardNumber, 'expMonth': expMonth, 'expYear': expYear, 'cvv': cvv, 'address': address, 'address2': address2, 'city': city, 'state': state, 'zipcode': zipcode, 'phone': phone}),
             success: function(data) {
                 alert('done!');
             }
        });
    },
});

I don't usually get into Jquery this much, so it may just be a noob problem with the formatting of the jquery object. Also, I'm using Codeigniter for the PHP framework. You can see the live version here

To clarify, this is the area of the code I need help with. It is not creating a multi dimensional object / array:

var orderItems = [];
        $('.quantity-input').each(function(){
            var orderItem = $(this).attr('data-name');
            var priceEach = $(this).attr('data-price');
            var qty = $(this).val();
            if(qty != '') {
                obj = {};
                obj[orderItem] = orderItem;
                obj[priceEach] = priceEach;
                obj[qty] = qty;
                orderItems.push(obj);
            }
        });

Answer 1

You need to quote your keys:

obj['orderItem'] = orderItem;
obj['priceEach'] = priceEach;
obj['qty'] = qty;

Or use dot notation:

obj.orderItem = orderItem;
obj.priceEach = priceEach;
obj.qty = qty;

Without the quotes/dot notation its like saying:

obj['Fresh Tilapia Filets'] = 'Fresh Tilapia Filets';
obj['$2.99'] = '$2.99';
obj[10] = 10;

Because its evaluating the variables with the same name.