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";

等等。

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

Answer 2

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

手动创建要从HTML元素发送的Json对象：

    $.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( "Data Saved: " + 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();
});

如何为JSON API创建复杂的javascript对象

2 个答案: