Friday, April 27, 2012

Display JSON data

Create a function to get data json data.

function getjson(){
var url = "https://sitename/getdata.php";
requestCrossDomain(url, function(results)
{


// result = {" resultdata ":[{" imgname ":"2147512358.jpg"," name ":"bhumika"},{"imgname
//                  ":"2411827535.jpg"," name ":"rahul"}]}

var myJSONObject1 = eval('(' + results + ')');
if(myJSONObject1== null)
{
return false;
}
$('#content_home').html(CreatedataView(myJSONObject1.resultdata)).fadeIn();
});
return false;
}



Convert Json string to Javascript objectArray. Please refer below syntax.
var myJSONObject1 = eval('(' + results + ')');

Create new function to create a dynamic display view.
and call function using below syntax
$('#content_home').html(CreatedataView(myJSONObject1.resultdata)).fadeIn();

        CreatedataView is a function name
        content_home is a Html Div element to display data in html page
        resultdata is a index of javascript ObjectArray.

function  CreatedataView(objArray, theme, enableHeader) {

var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
var str='<div><ul>';
for (var i = 0; i < array.length; i++) {
str += '<li><img src="imagepath/'+array[i]['imgname']+'" />';
 str += '<p>'+array[i]['name']+'</p></li>';
}
str+='</ul></div>';

//str = <div><ul><li><img src="imagepath/2147512358.jpg" /><p>bhumika</p></li>
//     <li><img src="imagepath/2411827535.jpg" /><p>rahul</p></li></ul></div>
return str;
}

Cheers...

1 comment: