Displaying JSON response in an HTML page

Question

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.

shouldn't be data.result.length in the for ? a good idea is always to debug the data you receive ... write some console.log() so you know the data and variables you are getting ... makes it easy to follow up... — balexandre
– balexandre, Commented Jan 1, 2020 at 22:49
The real question here is "how do I debug JavaScript code?" That is the question to address, and the area that you should learn about. In addition to console.log as @balexandre mentioned, it is very helpful to set a breakpoint in your code and then you can interactively look at your variables in the debugger. Here are introductions to the Chrome DevTools and Firefox DevTools. — Michael Geary
– Michael Geary, Commented Jan 1, 2020 at 23:09

Amit Sharma · Accepted Answer · 2020-01-02 07:00:50Z

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);
            }
        });

Collectives™ on Stack Overflow

Displaying JSON response in an HTML page

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related