Search jQuery

jQuery Forum

Not sure how to parse specific data from a json string into a collapsible container

in jQuery Mobile • 11 years ago

First post, new to this stuff, having a newb issue:

I have the following code, which is successfully pulling back the JSON object with the data fields / rows from mysql.

*****Begin Code*****
$(document).ready(function(){
$(document).bind('deviceready', function(){
var output3 = $('#blog1');

$.ajax({
type: 'GET',
url: 'http://xxxxx.com/aaa/blog.php',
dataType: 'jsonp',
jsonp: 'jsoncallback',
timeout: 5000,
success: function(data, status){

$.each(data, function(i,item){

var blog1 = 'Published: '+item.date+'  '
+ 'Title: ' +item.title+ ' '
+ 'Summary: ' +item.summary+' '
+ 'Post: ' +item.blog_text+' ';

output3.append(blog1);}
);

},
error: function(){
output.text('We are sorry, the TPro blog can not be loaded at this time. Please check your network connection.');
}
});
});
});

****END CODE****

What I can not figure out is how to pull out a field (or multiple fields) within each JSON record, and then drop that return value (such as blog1 above) into a collapsible panel div in query mobile (building within phone gap).

The end goal is to return the five most recent rows from mysql into 5 collapsible panels in the DOM. I am new to this (obviously) and learning by doing from all of you experts. Thank you for the help!

Craig

Replies(4)

dcarrith

Re: Not sure how to parse specific data from a json string into a collapsible container

11 years ago

I'm doing something similar but different. ;) But, maybe it will give you some ideas.

For lazy loading li elements into a ul element, I basically make an ajax call to a php server resource which builds the JSON and returns it. But, I found it easier to just build the HTML that I need on the server side and then it's this easy:

Here are the last two lines in the php server resource after the count and html has been calculated and built by the php loop:

$more_li_items_json = '{ "data" : [{ "count" : "'.$num_records_retrieved.'", "html" : "' . $li_elements_as_html . '" } ] }';
echo $more_li_items_json;

Then, all I have to do on the client side in the success callback is this:

success: function(msg){
more_items = $.parseJSON(msg);
more_items_count = more_items.data[0].count;
more_items_html = more_items.data[0].html;
if (more_items_count > 0) {
$('#div_id_of_ul_element li').last().before(more_items_html);
$(divId).listview('refresh');
// increment the listed_so_far by the number of items retrieved
listed_so_far += parseInt(more_items_count);
}
}

watusiware

Re: Not sure how to parse specific data from a json string into a collapsible container

11 years ago

If you control the server code, it is almost always better to return HTML fragments, rather than JSON.

I think JSON is over-done. It makes sense if you are writing an API for many different developers to use. It makes less sense in most cases when the backend is just supporting your application.

If you are parsing a lot of JSON - don't parse JSON. At least not yourself. Use a client-side templating system. Take a look at icanhaz.js.

applenoose

Re: Not sure how to parse specific data from a json string into a collapsible container

11 years ago

Thanks for the comments, will take a look later this evening as I dive back into this project. Thank you!

haga0054

Re: Not sure how to parse specific data from a json string into a collapsible container

11 years ago

Also do NOT use $(document).ready. If you read the documentation you would see this: http://jquerymobile.com/demos/1.1.0/docs/api/events.html. First thing says not to use this.

Top Reply

Response title

Attachments

jQuery Forum

Not sure how to parse specific data from a json string into a collapsible container

Replies(4)

Re: Not sure how to parse specific data from a json string into a collapsible container

Re: Not sure how to parse specific data from a json string into a collapsible container

Re: Not sure how to parse specific data from a json string into a collapsible container

Re: Not sure how to parse specific data from a json string into a collapsible container

Statistics

Tags

Actions