如何创建复杂的JavaScript对象用于JSON API

Question

以下是我用来查询API的JSON结构：

"order_items": [
        {
            "menu_item_id": "VD1PIEBIIG", 
            "menu_item_name": "Create Your Own", 
            "modifiers": [
                {
                    "modifier_id": "6HEK9TXSBQ", 
                    "modifier_name": "Shrimp"
                }
            ], 
            "quantity": "1", 
            "total": 15.99, 
            "variant_id": "TXDOR7S83E", 
            "variant_name": "X-Lg 18\""
        }
    ]

现在我想要使用Javascript从HTML页面调用这个API（使用像表单和下拉菜单等HTML元素）。我想要创建一个具有正确结构的Javascript对象，然后使用“stringify”函数将其转换为JSON。但我无法创建Javascript对象。有人能帮忙吗？

比如我想要有以下结构：

obj.order_items[0].menu_item_id="VD1PIEBIIG";
obj.order_items[0].menu_item_name="Create Your Own";
obj.order_items[0].modifiers[0].modifier_id="6HEK9TXSBQ";

等等。

- BrownTownCoder

Answer 1

var jsonToSend = { "order_items": [ ] };

// then for each order item
var orderItem = { "menu_item_id": <whatever>, 
  "menu_item_name": <whatever>,
  "quantity": <whatever>,
  "total": <whatever>,
  "variant_id": <whatever>,
  "variant_name": <whatever>,
  "modifiers": []
};

// then for each modifier
var modifier = { "modifier_id": <whatever>, "modifier_name": <whatever> };
orderItem.modifiers.push(modifier);

jsonToSend.order_items.push(orderItem);

JSON.stringify(jsonToSend);

- admanb

---

谢谢。这很有帮助。干杯。 - BrownTownCoder

Answer 2

好的，有几种方法可以做到这一点。

• 手动创建Json对象以从HTML元素发送：

      $.ajax({
          type: "POST",
          url: "some.php",
          data: new {"order_items": [
              {
               "total": $('total').Val(), 
               "variant_id": $('variant_id').Val(), 
               "variant_name": $('variant_name').Val()
              }
      ]})
          .done(function( msg ) {
             alert( "数据已保存: " + msg );
      });
  

• 您可以使用一个很棒的框架，比如KnockoutJs，这将使您的JSON对象与表单保持更新，这样您就不必手动更新。当您准备好时，只需将原始json提交回服务器即可。

在JsFiddle上查看这个基本示例

    var ClickCounterViewModel = function() {
    this.numberOfClicks = ko.observable(0);

    this.registerClick = function() {
        this.numberOfClicks(this.numberOfClicks() + 1);
    };

    this.resetClicks = function() {
        this.numberOfClicks(0);
    };

    this.hasClickedTooManyTimes = ko.computed(function() {
        return this.numberOfClicks() >= 3;
    }, this);
};

ko.applyBindings(new ClickCounterViewModel());

• 您可以使用任意数量的插件将表单序列化，但问题在于获取正确的JSON结构。

参见SerializeArray

$( "form" ).submit(function( event ) {
      console.log( $( this ).serializeArray() );
      event.preventDefault();
});

- shenku