将JSON数据输入HTML表单字段

Question

I have some 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"
  }
   }

I need to push this data into a form. The fields that I need to generate must look like this:

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

I cannot control the key in the JSON and I cannot control the name of the form field - these need to remain. I know which fields correspond to which keys in the JSON ie 'accdisc' is 'fixedDiscount'. I need to insert the correct value from the JSON into the value of the field. Also, the fields iterate (starting from 1) according to the number of accessories there are ie my form will continue with

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

and so on.

I'm quite new to working with JSON but I've been getting through this project ok up to this point where I'm just not sure how to approach this. I would like to be able to generate the fields as I will not know how many accessories I'll have. I was wondering if I could create some sort of map where I can say 'sku matches input accsku' then add an index?

The JSON is a snippet of a larger file containing a lot of product data with varying keys, this is an example of how I am pulling it into my form:

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

Above is much simpler for 'extendedFields' as I can use keys 'name' and 'data' to generate the input fields, but I really don't know how to approach my problem above with 'accessories'.

Can anyone give me some advice on how I might approach this please?

Additional info for clarification:

I know this: sku = accsku, fixedDiscount = accdisc, percentageDiscount = accperc, discountAll = accreg, upsell = accupsell, minimumQuantity = accnum, maximumQuantity = acclimit, forceAmount = accforce, forceAmountHidden = accforcehid, forceRemove = accforcerm

I need this in my form:

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

Answer 1

Check this link if it helps.

You need to use nested .each to access inner data.

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

Answer 2

I've had some help from a work colleague who gave me some assistance creating a map which is then used to build the input fields. I'm posting this in case anyone else needs a similar solution. The script works with a form with 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++;
}