将JSON数据提供到HTML表单字段中

时间:2013-11-21 09:23:39

标签: javascript jquery html json forms

我有一些JSON:

"accessories":{
  "tableware01":{
     "sku":"tableware01",
     "forceAmountHidden":"1",
     "upsell":"1",
     "discountAll":"1",
     "forceRemove":"1",
     "percentageDiscount":"12",
     "fixedDiscount":"1",
     "forceAmount":"1",
     "maximumQuantity":"12",
     "endDate":"2014-12-12T00:00:00",
     "minimumQuantity":"1",
     "startDate":"2012-12-12T00:00:00"
  },
  "cla000":{
     "sku":"cla000",
     "forceAmountHidden":"1",
     "upsell":"1",
     "discountAll":"1",
     "forceRemove":"1",
     "percentageDiscount":"23",
     "fixedDiscount":"1",
     "forceAmount":"1",
     "maximumQuantity":"123",
     "endDate":"2015-02-03T00:00:00",
     "minimumQuantity":"1",
     "startDate":"2011-02-03T00:00:00"
  }
   }

我需要将此数据推送到表单中。我需要生成的字段必须如下所示:

<input type="hidden" name="accsku1">
<input type="hidden" name="accdisc1">
<input type="hidden" name="accperc1">
<input type="hidden" name="accreg1">
<input type="hidden" name="accupsell1">
<input type="hidden" name="accnum">
<input type="hidden" name="acclimit1">
<input type="hidden" name="accforce1">
<input type="hidden" name="accforcehid1">
<input type="hidden" name="accforcerm1">

我无法控制JSON中的密钥,我无法控制表单字段的名称 - 这些都需要保留。我知道哪些字段对应于JSON中的哪些键,即'accdisc'是'fixedDiscount'。我需要将JSON中的正确值插入到字段的值中。此外,字段根据附件的数量迭代(从1开始),即我的表格将继续

<input type="hidden" name="accsku2">
<input type="hidden" name="accdisc2">

等等。

我很擅长使用JSON但是我已经完成了这个项目,直到现在我还不确定如何处理这个问题。我希望能够生成字段,因为我不知道我将拥有多少配件。我想知道我是否可以创建某种地图,我可以说'sku匹配输入accsku'然后添加索引?

JSON是一个较大文件的片段,其中包含大量具有不同键的产品数据,这是我将其拉入表单的示例:

$.getJSON("urltoJSONhere",function(product){
    $.each(product.extendedFields, function(i){
        $( "<input type='hidden' name='"+this.name+"' value='"+this.data+"'>" ).appendTo( form );
    });

上面对'extendedFields'来说简单得多,因为我可以使用键'name'和'data'来生成输入字段,但我真的不知道如何用'附件'解决上面的问题。

有人可以就我如何处理这个问题给我一些建议吗?

澄清的其他信息:

我知道这个:     sku = accsku,     fixedDiscount = accdisc,     percentageDiscount = accperc,     discountAll = accreg,     upsell = accupsell,     minimumQuantity = accnum,     maximumQuantity = acclimit,     forceAmount = accforce,     forceAmountHidden = accforcehid,     forceRemove = accforcerm

我的形式需要这个:

<input type="hidden" name="accsku1" value="tableware01">
<input type="hidden" name="accdisc1" value="1">
<input type="hidden" name="accperc1" value="12">
<input type="hidden" name="accreg1" value="1">
<input type="hidden" name="accupsell1" value="1">
<input type="hidden" name="accnum1" value="1">
<input type="hidden" name="acclimit1" value="12">
<input type="hidden" name="accforce1" value="1">
<input type="hidden" name="accforcehid1" value="1">
<input type="hidden" name="accforcerm1" value="1">
<input type="hidden" name="accsku2" value="cla000">
<input type="hidden" name="accdisc2" value="1">
<input type="hidden" name="accperc2" value="23">
<input type="hidden" name="accreg2" value="1">
<input type="hidden" name="accupsell2" value="1">
<input type="hidden" name="accnum2" value="1">
<input type="hidden" name="acclimit2" value="123">
<input type="hidden" name="accforce2" value="1">
<input type="hidden" name="accforcehid2" value="1">
<input type="hidden" name="accforcerm2" value="1">

2 个答案:

答案 0 :(得分:0)

检查此链接是否有帮助。

您需要使用嵌套的.each来访问内部数据。

http://jsfiddle.net/pE6yE/9/

答案 1 :(得分:0)

我得到了一位工作同事的帮助,他给了我一些帮助,创建了一个地图,然后用于构建输入字段。我发布这个以防其他人需要类似的解决方案。该脚本使用id为“accform”的表单。

var accessories = {
"tableware01": {
    "sku": "tableware01",
        "forceAmountHidden": "1",
        "upsell": "1",
        "discountAll": "1",
        "forceRemove": "1",
        "percentageDiscount": "12",
        "fixedDiscount": "1",
        "forceAmount": "1",
        "maximumQuantity": "12",
        "endDate": "2014-12-12T00:00:00",
        "minimumQuantity": "1",
        "startDate": "2012-12-12T00:00:00"
},
    "cla000": {
    "sku": "cla000",
        "forceAmountHidden": "1",
        "upsell": "1",
        "discountAll": "1",
        "forceRemove": "1",
        "percentageDiscount": "23",
        "fixedDiscount": "1",
        "forceAmount": "1",
        "maximumQuantity": "123",
        "endDate": "2015-02-03T00:00:00",
        "minimumQuantity": "1",
        "startDate": "2011-02-03T00:00:00"
}
}

var map = {
    sku: "accsku",
    forceAmountHidden: "accforcehid",
    upsell: "accupsell",
    discountAll: "accreg",
    forceRemove: "accforcerm",
    percentageDiscount: "accperc",
    fixedDiscount: "accdisc",
    forceAmount: "accforce",
    maximumQuantity: "acclimit",
    minimumQuantity: "accnum",
    endDate:"endDate",
    startDate:"startDate"
}
var form = $("#accform");
var index = 1;
for (var k in accessories) {
    var accessory = accessories[k];
    for (var prop in accessory) {
        var name = map[prop] + index;
        $('input[name=' + name + ']').val(name);
        $( "<input type='text' name='"+name+"' value='"+accessory[prop]+"'>" ).appendTo( form );
    }
    index++;
}