Form load values from json

[keja]

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
                }

[jarry]

Please use this data instead.

Code:

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

[keja]

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

[jarry]

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)

[keja]

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

[jega]

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

[keja]

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.