add_order_items.js

by Paul Davis

HTML

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AddOrderItems</title>
</head>
<body>
</body>
</html>

JavaScript

var order_items_array = [];
order_items_array.push({item_id: 100, qty: 2});
order_items_array.push({item_id: 101, qty: 3});
order_items_array.push({item_id: 102, qty: 1});

function addOrderItems(order_id, order_items_array) {
      var frmUrl = `/orders/${order_id}/order_items`;
      var frmData = new FormData();
      var ul = document.createElement('ul');
      frmData.append('utf8', '✓');
      frmData.append('_method', 'put');
      for (var i=0, len=order_items_array.length; i < len; i++) {
        //code below would be specific to how you name your fields
        //frmData.append(your_order_items_array_field, associated_order_items_qty);

				var li = document.createElement('li');
        li.appendChild(document.createTextNode(`Item_ID: ${order_items_array[i].item_id}, Qty: ${order_items_array[i].qty}`));
        ul.appendChild(li);
        console.log(`Item_ID: ${order_items_array[i].item_id}, Qty: ${order_items_array[i].qty}`);
      }
      //after the formData object is created with your values, 
      //submit it via Rails.ajax. you can handle this inside your
      //controller using respond_to for format.js
      //Rails.ajax({ url: frmUrl, type: 'POST', data: frmData });
      document.body.appendChild(ul);
    };

addOrderItems(10, order_items_array);