Question

I’m returning data via JSON and attempting to loop through the JSON dataset to dynamically populate a form. I need to reference a particular field TYPE (select, text, checkbox etc) via that field’s id attribute. The id attribute I’m matching against is coming through in the JSON columns. i.e. each column value in JSON corresponds to a form field’s ID attribute. Using that column value, I need to find out what its corresponding form field TYPE is so that I know how to handle the population of that field, i.e. if it’s a select box, the insert is different than for text fields, etc. This is what I have so far. It is populating the text fields just fine (because that doesn’t do a check on field type), but I need help accessing and populating checkboxes, selects, ckeditor, etc.

JSON

{"COLUMNS":["RECORD_ID","USER_ID","PRODUCT_NAME","MODEL_NUMBER","KEYWORDS","CATEGORIES","PRODUCT_GROUP_ID","DESCRIPTION","ORIGIN","SHIPPING_PORTS","MOQ","MOQ_UNIT","FOB_PRICE_CURRENCY","FOB_PRICE","LEAD_TIME","CAPACITY","CAPACITY_UNIT","SAMPLE_CURRENCY","SAMPLE_PRICE","SAMPLE_LEAD_TIME","PACKING","STANDARDS","SHIP_SINGLE","SINGLE_LEAD_TIME","PAYMENT_TERMS","SHOW_LIVE","MAKE_SELL_OFFER","RECEIVE_ALERTS","ALERT_KEYWORDS","BRAND_NAME","IMAGE1","IMAGE2","IMAGE3","IMAGE4","IMAGE5","IMAGE6","IMAGE7","IMAGE8","DOCUMENT1","DOCUMENT2","EXPIRY_DATE","CREATED_DATE","UPDATED_DATE","EXPIRED_FLAG","DISABLED"],"DATA":[[2,18,"Product Title "," * Model Number","Keywords","",17,"<p>\r\n\tsdadsafsasdasdasdasd<\/p>",0.0," \tShipping Ports","Minimum Order (MOQ)","Piece\/s","EUR","Please Enquire","MOQ Lead Time","Monthly Production Capacity","Piece\/s","EUR","Sample Price","Sample Lead Time","According to your requirements","Standards Compliance (e.g. cUPC, UPC, UL)",true,"Lead Time for single unit","L\/C,T\/T,D\/A",true,true,true,"bathroom vanities, bathroom mirrors, tiles, faucets",null,"17431~Sacred-Heart-of-Jesus-Posters.jpg","","","","","","","","","",null,"October, 09 2010 00:00:00","October, 13 2010 00:00:00",false,false]]}

jQUERY CODE

var product_id = $("#product_id").val();

$.getJSON("/cfcs/main.cfc?method=getProducts&returnformat=json",{"product_id":product_id},function(res,code) {
 //loop over each row
 for (i = 0; i < res.DATA.length; i++) {
  //loop over each column
  for (j = 0; j < res.DATA[i].length; j++) {
   var field = res.COLUMNS[j].toString().toLowerCase(); 
   var value = res.DATA[i][j].toString();
   // Here I want to check field type so I know how to insert data. But, I'm not sure how to go about it. Following is pretty much just pseudo code...

   if(field){    
    if (field.type == 'checkbox' && value == 1) {
     field.checked = true;
    }else if(field.type == 'select'){
     var options = $("#" + field).attr('options');
     if(options.length == 0){
      options[options.length] = new Option(value, field, true, true);
     }else{
      $("#" + field).val(value);
     }
    }else if(field.type == 'textarea'){
     CKEDITOR.instances[field].setData(value)
    }else {
     $("#" + field).val(value);
    }
   }
  }
 }
});

Answer 1

If field was an object, then you should be doing this:

$('#' + field.id)...

But as you are getting the value from JSON, it is a string. So you should be doing this:

$('#' + field).attr('type')

and not

field.type