CODEWITHSUNDEEP
jqueryhtmljsonajax
Mr. TG
Mr. TG

Reputation: 99

Displaying JSON response in an HTML page

I am having issues displaying my JSon response on my html page using Jquery/Ajax my code is as follows

JSON RESPONSE

{
"result": [
    {
        "list_id": "3",
        "state": "yuoio",
        "zone": null,
        "name": " T. Oji",
        "phone": "082800000",
        "email": "[email protected]",
    },
    {
        "list_id": "7",
        "state": "Hu IUOM",
        "zone": null,
        "name": "Skpan",
        "phone": "05555188",
        "email": "[email protected]",
    },

],
"Status": 200                                                                                     
}

While this is my JQuery code

               function  performance(){
                $.ajax({
                type  : 'GET',
                url   : 'http://localhost/senators/Api_v1/SenatorPoints',
                async : true,
                dataType : 'json',
                success : function(data){
                    var html = '';
                    var i;
                    for(i=0; i<data.length; i++){
                        html += '<div class="col-6 col-sm-6 col-md-4 mb-4 mb-lg-0 col-lg-4">'+
                                    '<a href="#" class="popular-category h-100">'+
                                                '<span>'+ '<img src="assets/images/dino.jpeg"class="img-fluid" >'+ '</span>'+
                                    '<span class="icon mb-3"><span class="flaticon-flower">'+ '</span></span>'+
                                    '<span class="caption mb-2 d-block">'+ data.result[i].name +'</span>'+
                                     '<span class="caption mb-2 d-block">'+ data.result[i].state +'</span>'+
                                    '</a>'+
                            '</div>';
                    }
                    $('#show_data').html(html);
                }
 
            });

HTML

<div id="show_data"></div>

Any help, The data doesn't show on the html page.

Upvotes: 2

Views: 92

Answers (1)

Amit Sharma
Amit Sharma

Reputation: 1795

here is the json that I received with response 

$data = '{
"result": [
{
    "list_id": "3",
    "state": "yuoio",
    "zone": null,
    "name": " T. Oji",
    "phone": "082800000",
    "email": "[email protected]"
},
{
    "list_id": "7",
    "state": "Hu IUOM",
    "zone": null,
    "name": "Skpan",
    "phone": "05555188",
    "email": "[email protected]"
}

],
"Status": 200                                                                                     
}';

echo  $data;die;

Here is the updated ajax 

$.ajax({
            type  : 'GET',
            url   : 'test12.php',
            dataType : 'json',
            async : true,
            success : function(data){

                var html = '';
                var i;

                 for(i=0; i<data.result.length; i++){
                    html += '<div class="col-6 col-sm-6 col-md-4 mb-4 mb-lg-0 col-lg-4">'+
                                '<a href="#" class="popular-category h-100">'+
                                            '<span>'+ '<img src="assets/images/dino.jpeg"class="img-fluid" >'+ '</span>'+
                                '<span class="icon mb-3"><span class="flaticon-flower">'+ '</span></span>'+
                                '<span class="caption mb-2 d-block">'+ data.result[i].name +'</span>'+
                                 '<span class="caption mb-2 d-block">'+ data.result[i].state +'</span>'+
                                '</a>'+
                        '</div>';
                } 

                $('#show_data').html(html);
            }
        });

Upvotes: 2

Related Questions