مشکل در ساخت json object

[alismith]

سلام

دوستان اگر امکانش هست لطفا به من بگید از چه روشی عناصر فرم رو به صورت یا json object در بیارم

کد های من به این شکل هست :

<script>

$(document).ready(function(){



var Jdata;



$("#makeJson").click(function(){

		

$("input:not([type=button])").each(function(i){

			

///////////////////////////			

			

jd += "{value:"+"'"+this.val()+"'"+",property:{name:"+"'  "+this.attr("name")+"'"+",type:"+"'"+this.attr("ty  pe")+"'"+",dataType:"+this.attr("dType")+"'"+",id:  "+this.attr("id")+"'"+"}";



if(i<$("input:not([type=button])").length){



jd+= "},";



}else{



 jd+= "}";



}

			

/////////////////////////



 });



Jdata = "{fields:["+ jd +"]}";

      

 $("#responceJdata").append(Jdata);

		

  });

	

});

</script>









<form>



<input type="checkbox" name="ch1" value="vCh1" dType="bool" id="ich1"/>

<input type="checkbox" name="ch2" value="vCh2" dType="bool" id="ich2"/>

<input type="checkbox" name="ch3" value="vCh3" dType="bool" id="ich3"/>

<input type="checkbox" name="ch4" value="vCh4" dType="bool" id="ich4"/>



<input type="button" id="makeArray" value="Make Json"/>



</form>



<br/><br/>



<div id="responceJdata"></div>

من اینجا نمی دونم چرا چیزی در خروجی نمایش داده نمیشه، و نمیدونم کلا json object درست شده یا نه، و حتی نمی دونم در نهایت به شکلی که میخام در میاد و می تونم ازش استفاده کنم یا نه؟

کد مورد نیاز من :

var Jdata={

	

	fields:[

{



value:"data",

property:{

 name:'ali',

 type:"textbox",

 dataType:"text",

 id:1

 }



},{



value:"data",

property:{

 name:"smith",

 type:"checkbox",

 dataType:"bool",

 id:2

 }



}

]

};

البته همین قالب داده خودش درسته و به وسیله yui json utility تونستم ازش استفاده کنم، اما نمی دونم خروجی کد بالا هم همین هست یا نه؟

اگر دوستان روشی دارند توضیح بدن یا لطف کنند با نمونه کد و اینجا قرار بدن تا مشکل من حل بشه.


با تشکر

[alismith]

<input type="button" id="makeArray" value="Make Json"/>

id همان makeJson است

[mehdi.mousavi]

سلام.
می تونید بدین شکل عمل کنید:

$(function () {

    var getFormData = function () {

        var fields = [];

        $("input:not([type=button])").each(function () {

            var self = $(this);

            var prop = {

                'name': self.attr('name'),

                'type': self.attr('type'),

                'dataType': self.attr('dType'),

                'id': self.attr('id')

            };



            fields.push(prop);

        });



        return { fields: fields };

    };



    $("#makeJson").click(function () {

        var fieldsAsJsonObject = getFormData();

        var fieldsAsJsonString = JSON.stringify(fieldsAsJsonObject);

    });

});

موفق باشید.

[alismith]

سلام

استاد خیلی ممنون من این روش رو تو stackoverflow دیده بودم، اما میخاستم اون قالبی که من میخامو داشته باشه، ولی در کل خیلی خیلی ممنون مهندس لطف بزرگی کردید

ممنون

[mehdi.mousavi]

سلام

استاد خیلی ممنون من این روش رو تو stackoverflow دیده بودم، اما میخاستم اون قالبی که من میخامو داشته باشه، ولی در کل خیلی خیلی ممنون مهندس لطف بزرگی کردید

ممنون

سلام.
کدی که نوشتم دقیقا باعث ایجاد همون JSON Object ای میشه که شما خواسته بودید...
اگر هنوز با این مساله مشکل دارید، لطفا سوالتون رو دقیق مطرح کنید تا پاسخ بدم.

موفق باشید.

[alismith]

سلام

منظورم این بود :

property:{

 name:'ali',

 type:"textbox",

 dataType:"text",

 id:1

 }

ولی استاد کد شما هم خوب هستش و ازتون ممنونم، ببخشید ولی من هنوز جواب اون دوتا سوال دیگه رو نگرفتم، اگه لطف کنید یک راهنمایی هم برای اون دو تا تاپیک بکنید خیلی خیلی ممنون میشم

با تشکر فراوان

[alismith]

سلام

من کد زیر رو برای دریافت select option های موجود داخل صفحه و تبدیل اونها به json و در نهایت اضافه کردن مقادیر به fields Array نوشتم (بر گرفته از کد شما) اما کار نکرد، ممنون میشم شما یا دوستان ببینن مشکل از کجا هستش

var getFormData = function () {

          

        var fields = [];

        var optArr=[];	 

        // <select><option></option></select>

		

		$("select").each(function(){



			var self = $(this);

			

			for(var i =0; i<self.options.length; i++){

				 

				  var k = self.options[i].text;

				 var v = self.options[i].value;

				  optArr.push({k:v});

				}

				

			

            var prop = {

                'name': self.attr('name'),

				'type': 'select',

				'options': optArr

			};

			

			fields.push(prop); 

			

			}); 

 

        return { fields: fields }; 

    };

 

    $("#makeJson").click(function () {

        var fieldsAsJsonObject = getFormData();

        var fieldsAsJsonString = JSON.stringify(fieldsAsJsonObject);

		$("#responceJdata").html(fieldsAsJsonString);

	 

});

با تشکر

[mehdi.mousavi]

سلام.
شما اگر یک مثال واقعی از کاری که میخواهید انجام بدید بزنید که من متوجه بشم خروجی مد نظر شما چیه، ظرف چند دقیقه کدش رو براتون می نویسم. کد اخیر شما فیلدی به اسم options ای داره، که در پست اول به اون اشاره نکرده اید و در JSON نهایی هم ننوشته اید که مایلید اون option ها به چه شکل در Object قرار بگیره... در نتیجه، یک HTML با تمامی Form Element هایی که میخواهید داشته باشید ایجاد کنید (اعم از TextBox، Select، Button و ...) و بنویسید JSON مورد نظر شما چی باید باشه، تا بگم چیکار کنید.

موفق باشید.

[alismith]

سلام

ممنون جناب موسوی، من تمام مواردی که فرمودید رو در زیر قرار دادم

عناصر موجود در فرم که باید به json object تبدیل بشند :

TextBox
CheckBox
RadioButton
select
textArea
label
Img


برای Input :

TextBox
CheckBox
RadioButton

کد شما عالی بود استاد

اما الان چون به عناصر فرم اضافه شد، کد باید تغییر کنه(لطف می کنید البته) من شکل کلی کد رو نوشتم و در زیر قرار دادم، اما نحوه ایجاد این کد و خوندنش توسط php رو نمی دونم، البته کلا می دونم به چه شکل decode میشه و مثلا خروجی object در سمت سرور به ما میده، اما دقیق نمیدونم چطوری کد زیر رو سمت سرور بازیابی کنم، و اگر در کنار ساخت json object ، نحوه خوندن اون در سمت سرور هم بگید خیلی خیلی ممنون میشم جناب موسوی.

JSON :

{"fields":[

 

 // <<correct output

 {"name":"inpt","type":"text","dataType":"varchar",  "id":"1","class":"default","top":"67","left":"194"  },

 {"name":"inpt","type":"checkbox","dataType":"bool"  ,"id":"2","class":"default","top":"107","left":"20  0"},

 {"name":"inpt","type":"radio","dataType":"bool","i  d":"3","class":"default","top":"149","left":"20  3"}

 // correct output>>

 ],

 

 // select???

 

 "select":[

 

 {

 "name":"select1",

 "type":"select",

 "dataType":"varchar",

 "id":"1",

 "class":"default",

 "top":"67",

 "left":"194",

 "options":[

    

	{"option1Text":"option1Value"},

	{"option2Text":"option2Value"}

 ]

 

 },

 {

 "name":"select2",

 "type":"select",

 "dataType":"varchar",

 "id":"1",

 "class":"default",

 "top":"67",

 "left":"194",

 "options":[

    

	{"option1Text":"option1Value"},

	{"option2Text":"option2Value"}

 ]

 

 }

 ],

 

 //textArea???

 

 "textArea":[

 

  {"name":"Tr1","type":"textArea","dataType":"varcha  r","id":"1","class":"default","top":"67","left":"1  94"},

  {"name":"Tr2","type":"textArea","dataType":"varcha  r","id":"1","class":"default","top":"67","left":"1  94"}

 

 ],

 

 //image???

 

 "img":[

 

  {

  "name":"img1",

  "src":"url",

  "id":"1",

  "class":"default",

  "top":"67",

  "left":"194"

  },

  {

  "name":"img2",

  "src":"url",

  "id":"1",

  "class":"default",

  "top":"67",

  "left":"194"

  }

 

 ],

 

 //label???

 

 "label":[

 

  {

    "name":"lblname",

	"for":"inptName",

	"top":"topPos",

	"left":"leftPos",

	"class":"default",

	"id":"1"

  },

  {

    "name":"lblname2",

	"for":"inptName",

	"top":"topPos",

	"left":"leftPos",

	"class":"default",

	"id":"2"

  }

 

 ]

 

 };

مقادیر option منظورم این بود :

<select dataType="varchar" id="1" class="default" top="67"left="194">
 <option value="option1Value">option1Text</option>
 <option value="option2Value">option2Text</option>
 </select>

فقط قضیه ای که اینجا می مونه این است که در object options کلیدهای دسترسی از قبل تعیین نشدن و مطابق متن option که کاربر وارد می کنه، کلید ساخته میشه، به همین دلیل نمی دونم چطوری سمت سرور چطوری مقادیر options را بازیابی کنم.


خیلی ممنون جناب موسوی

با تشکر

[alismith]

سلام

جناب موسوی من یک کد برای select option نوشتم،اما 2تا سوال دارم از شما :

1- چطوری این کد رو به json objectی که در پست قبل گفتم اضافه کنم؟
2- این کدی که من نوشتم ظاهرا خوب کار می کنه، اما نمیدونم چرا متغییر k مقادیرش به آرایه ارسال نمیشه

 var selects = [];

	 var option = [];

   $("select").each(function(i){

	   

	    var self = $(this);

		

		self.children().each(function(){

			var k = "'"+$(this).text()+"'";

			var v = $(this).attr("value");



			 option.push({k:v});

			});

		

		 var prop = {

			 

                   'name':self.attr('name'),

                   'type':'select',

                   'dataType':'varchar',

                   'id':'1',

                   'class':'default',

                   'top':'67',

                   'left':'194',

                   'options':option		  

			       };



  		 selects.push(prop);

         option = [];

 	   });

با تشکر

[alismith]

خروجی کد بالا همچین چیزی میشه :

[{"name":"testSelect1","type":"select","dataType":"  varchar","id":"1","class":"default","top":"67","le  ft":"194","options":[{"k":"val1"},{"k":"v2"},{"k":"v3"}]},{"name":"testSelect2","type":"select","dataType"  :"varchar","id":"1","class":"default","top":"67","  left":"194","options":[{"k":"val1"},{"k":"v2.2"},{"k":"v3.2"}]}]

[mehdi.mousavi]

سلام.
برای اینکار، ابتدا تابعی می نویسم که کلیه Property های مشترک مورد نظر ما رو استخراج کنه:

getGenericProps = function (obj) {

    return {

        'type': obj.get(0).tagName,

        'name': obj.attr('name'),

        'dataType': obj.attr('dataType'),

        'id': obj.attr('id')

    };

}

اگر Property ی مشترک دیگری بین Element های مورد نظرتون وجود داره رو نیز باید به تابع فوق اضافه کنید. سپس، تابع دیگری می نویسیم که Option های یک Select رو بصورت آرایه ای از Key-Value Pair به ما برگردونه:

getSelectOptions = function (obj) {

    var options = [];

    obj.find('option').each(function () {

        var opt = $(this), keyval = {};

        keyval[opt.text()] = opt.attr('value');



        options.push(keyval);

    });



    return options;

}

در گام بعدی، تابعی می خواهیم تا Element مورد نظر رو ما رو در DOM Document پیدا کنه و کلیه Property های مشترک + Option های مربوطه (اگر Select بود) رو بصورت آرایه به ما برگردونه:

getFormElementData = function (selector) {

    var fields = [];

    $(selector).each(function () {

        var self = $(this), prop = getGenericProps(self);

        if (self.is('select')) {

            prop.options = getSelectOptions(self);

        }



        fields.push(prop);

    });



    return fields;

}

در نهایت، تابع دیگری نیاز داریم تا کلیه داده های فرم رو با فراخوانی تابع فوق بدست بیاره و اونو بصورت Object مورد نظر ما به ما برگردونه:

getFormData = function () {

    var data = {};

    data['select'] = getFormElementData('select');

    data['textarea'] = getFormElementData('textarea', 'textArea');

    return data;

}

تابع اخیر، ابتدا Select Element های موجود در فرم رو در میاره و تحت نام select در Object نهایی مورد نظر ما ذخیره میکنه. سپس، به سراغ textarea ها میره و ... کافیه به همین شکل، Image و ... رو نیز به لیست فراخوانی های فوق اضافه کنید تا داده های مورد نظر رو به اون شکلی که قبلا توضیح داده بودید، دریافت کنید.

موفق باشید.

[raminho171]

$('#postlist').html(output);
} //listPosts

function showPost(id) {
$.getJSON('http://iviewsource.com/?json=get_post&post_id=' + id + '&callback=?', function(data) {
var output = '<h3>' + data.post.title + '</h3>';
output += data.post.content;
$('#mypost').html(output);
});
}


من این کد رو دارم نمیدونم چیه میخوام تو اپم هرچی تو وبلاگم میزارم بیاد تو اپم قسمت نیوز میخوام با جی سون باشه یعنی با هر پست من این آدیت بشه
وبلاگم هم هست yusufsolimani.mihanblog.com میخوام اخبارای تو این میزارم تو اپم هم نشون بده لطفا کد رو ادیت کنید بهم بگید مرسی