将JSON数据馈送到HTML表单字段中

Feed JSON data into HTML form fields

本文关键字：HTML 表单 字段 JSON 数据      更新时间：2023-09-26

我有一些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"answers"data"来生成输入字段，但我真的不知道如何用"accessories"来解决上面的问题。

有人能给我一些建议吗？

需要澄清的附加信息：

我知道：sku＝accsku，fixedDiscount=accdisc，percentageDiscount=accperc，discountAll=accreg，upsell=accupsell，minimumQuantity=accnum，maximumQuantity=acclimit，forceAmount=accforce，forceAmountHidden=强制隐藏，forceRemove=强制

我需要这个在我的表格中：

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

如果有帮助，请查看此链接。

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

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

我得到了一位同事的帮助，他帮助我创建了一个映射，然后用于构建输入字段。我发布这个以防其他人需要类似的解决方案。该脚本适用于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++;
}
相关文章：