JSON results not displaying in HTML

Question

I am trying to display a JSON result as below in my HTML page:

{
    "error": false,
    "gal_providers": [
        {
            "GalProvider": {
                "id": "132",
                "uid": "gp_522f1e047329f",
                "user_id": "49754",
                "author_id": "0",
                "gal_category_id": "3",
                "provider_type": "photographer",
                "other_info": "",
                "cover_img": "495d42.jpg",
                "sample_img1": "b.jpg",
                "sample_img2": "mb.jpg",
                "sample_img3": "e2_thumb.jpg",
                "website": "",
                "gal_location_id": "1",
                "gal_location_other": "",
                "show_contact_num": "1",
                "show_email": "1",
                "show_website": "1",
                "show_contact_form": "0",
                "store_view_count": "0",
                "contact_num_view_count": "42",
                "email_view_count": "23",
                "featured": "0",
                "likes": "50",
                "new": "0",
                "views": "1377",
                "rating": "1967",
                "status": "1",
                "added_on": "1366286510"
            },
            "User": {
                "id": "49754",
                "uid": "516fe0addefb0",
                "name": "Photographer Name Photography",
                "username": "photo67",
                "password": "somepassword",
                "email": "excellent.photographer@gmail.com"
                /* ...and so on ... */
            }
        }
    ]
}

And my jquery is:

jQuery.each(resp.gal_providers, function(index, gal_provider) {

        html = "";
        html = html + '<div class="heading" style="">';
        html = html + '<a href="'+gal_provider.GalProvider.id+'">'+gal_provider.User.name+'</a>';
        html = html + '</div>';

        $("#temp_res").append(html);

        page_num++;
    });

But it is not displaying anything in div id temp_res. I am new to jquery and json as well. Whats wrong with the jquery ?

Answer 1

try something like this

var resp = json_result;//if json_result is javascript object

var resp = jQuery.parseJSON(json_result);//if json_result is string
var html = "";
jQuery.each(resp.gal_providers, function(index, gal_provider) {
    html = html + '<div class="heading" style="">';
    html = html + '<a href="'+gal_provider.GalProvider.id+'">'+gal_provider.User.name+'</a>';
    html = html + '</div>';
});
$("#temp_res").append(html);