Print Page - Form load values from json

Title: Form load values from json
Post by: keja on July 02, 2019, 11:42:12 PM

Dear Team,

The address.address1 does not bind the value to textbox.

The html is
<input class="easyui-textbox" id="txtaddress1" name="address.address1" style="width: 100%" data-options="label:'Address 1:'" />

Setting values from json
$('#testForm').form('load', data); here, data is below object.

The json is

   {
   "firstname":"Leo",
   "address":{
   "address1":"13, Boardwalk",
   "address2":"Street 27"
   },
   "city":"Bangalore",
   "state":"BA",
   "gender":"Male",
   "color":["Red","Blue"],
   "favorite":{
   "food":[null,null,"chicken",null],
   "favoritenumber":"3"
   },
   "personalinfo":{
   "Emails":["mail1@example.com","mail2@example.com","mail3@example.com"]
   },
   "isactive":true
   }

Title: Re: Form load values from json
Post by: jarry on July 04, 2019, 02:03:41 AM

Please use this data instead.

Code:

{
"firstname":"Leo", 
"address.address1":"13, Boardwalk",
"address.address2":"Street 27"
},

Title: Re: Form load values from json
Post by: keja on July 11, 2019, 10:14:55 PM

Thanks, Jarry for your information.

I get this JSON from API. Unfortunately, we cannot modify the JSON received from API everytime.

It will be good if there any alternative to achieve this. We expect to work similarly form2js.js/js2form.js

Title: Re: Form load values from json
Post by: jarry on July 11, 2019, 11:47:51 PM

Write a function to convert data to desired format.

Code:

function convert(data){
	var result = {};
	for(var field in data){
		var val = data[field];
		if ($.isPlainObject(val)){
			for(var subField in val){
				result[field+'.'+subField] = val[subField];
			}
		} else {
			result[field] = val;
		}
	}
	return result;
}
var data = {
	"firstname":"Leo", 
    "address":{
        "address1":"13, Boardwalk",
        "address2":"Street 27"
      },
    "city":"Bangalore"
};
data = convert(data);
console.log(data)

Title: Re: Form load values from json
Post by: keja on July 12, 2019, 02:26:53 AM

I cherish your help, Jarry.

It works for 2 level object hierarchy. It does not work for 3 level object.
And in our application, it could be an object with n level

Thanks,

Kiran

Title: Re: Form load values from json
Post by: jega on July 15, 2019, 12:35:10 AM

{
"firstname":"Leo",
"address":{
"address1":"13, Boardwalk",
"address2":"Street 27"
},
"city":"Bangalore",
"state":"BA",
"gender":"Male",
"color":["Red","Blue"],
"favorite":{
"food":[null,null,"chicken",null],
"favoritenumber":"3"
},
"personalinfo":{
"Emails":["mail1@example.com","mail2@example.com","mail3@example.com"]
},
"isactive":true
}
   function getPersData(ID){
$.ajax({
        type: "GET",
        cache: false,
        url: [CALL API AND GET JSON DATA],
        data: {
           personID:ID
        },
        //other settings
        success: function(data) {
            //console.log(data);
            $.each(data, function(index, element){
               var personData = element;
               var addressData = personData.address;
               var favData = personData.favorite;
               var personalInfo = personData.personalinfo;
               console.log(personData.firstname);
               console.log(addressData.address1);
$('#txtaddress1').textbox('setValue'.addressData.address1);
               console.log(addressData.address2);
               console.log(favorite.favoritenumber);

            });
         }
      }
   }

Your html is wrong

<input class="easyui-textbox" id="txtaddress1" name="address.address1" style="width: 100%" data-options="label:'Address 1:'" />

remove name or make name same as id

Title: Re: Form load values from json
Post by: keja on July 15, 2019, 01:46:15 AM

Thanks, Jega. The HTML is correct. It works fine at my end

The function provided by Jarry works perfectly with the same HTML. However, this function takes care only 2 levels of property binding.

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: keja on July 02, 2019, 11:42:12 PM