How to display multiple records fetched in JSON from server using Ajax?

Question

Trying to post to a PHP file that returns a JSON response and then use it to display results but only one record is displayed with undefined values.

Here is the JSON response from core/backend/comm.php:

{
    "name": "Rehan",
    "location": "Pune",
    "description": "hello hi",
    "created_by": 13692,
    "username": "xyz",
},
{
    "name": "Sameer",
    "location": "Bangalore",
    "description": "how are you",
    "created_by": 13543,
    "username": "abc",
},
<!--JSON RESPONSE ENDS-->

Here is the code that I have tried but not working:

$('[id^="cat"]').click(function() {
   // do something
  var prot= this.getAttribute("prot");


       jQuery.ajax({
    url: "core/backend/comm.php",
    data:{ prot: prot }, 
    // $("#query_form").serialize(),
    type: "POST",
    success:function(data){

    // $("#repo").html(data);

data = [data];
var htmlText = '';

            for ( var key in data ) {
                htmlText += '<div class="div-conatiner">';
                htmlText += '<p class="p-name"> Name: ' + data[key].name + '</p>';
                htmlText += '<p class="p-loc"> Location: ' + data[key].location + '</p>';
                htmlText += '<p class="p-desc"> Description: ' + data[key].description + '</p>';
                htmlText += '<p class="p-created"> Created by: ' + data[key].created_by + '</p>';
                htmlText += '<p class="p-uname"> Username: ' + data[key].username + '</p>';
                htmlText += '</div>';
            }

            $('#repo').append(htmlText);


    },

    error:function (){}
    });

});

Corrected Code:

$('[id^="cat_"]').click(function() {
   // do something
  var prot= this.getAttribute("prot");


    jQuery.ajax({
    url: "core/backend/comm.php",
    // dataType: "text",
    data:{ prot: prot }, 
    // $("#query_form").serialize(),
    type: "POST",
    success:function(data){

    // $("#repo").html(data);
console.log(data);
var data = JSON.parse(data);
var htmlText = '';

            for ( var key in data ) {
                    htmlText += '<div class="div-conatiner">';
                    htmlText += '<p class="p-name"> Name: ' + data[key].name + '</p>';
                    htmlText += '<p class="p-loc"> Location: ' + data[key].location + '</p>';
                    htmlText += '<p class="p-desc"> Description: ' + data[key].description + '</p>';
                    htmlText += '<p class="p-created"> Created by: ' + data[key].created_by + '</p>';
                    htmlText += '<p class="p-uname"> Username: ' + data[key].username + '</p>';
                    htmlText += '</div>';
                }

                $('#repo').append(htmlText);


    },

    error:function (){}
    });




});

Here is the corrected JSON response:

[ {
        "name": "Rehan",
        "location": "Pune",
        "description": "hello hi",
        "created_by": 13692,
        "username": "xyz"
    },
    {
        "name": "Sameer",
        "location": "Bangalore",
        "description": "how are you",
        "created_by": 13543,
        "username": "abc"
    }]

iiirxs · Accepted Answer · 2018-08-03 22:07:52Z

2

The reason for this unpredictable behavior is that you are using wrong dataType in your ajax call. You are using dataType: 'text' when what you need is clearly dataType: 'json' or you could even ommit dataType as by default jquery uses Intelligent Guess for data types xml, json, script, or html. Documentation here.

jQuery tries to guess dataType based on the MIME type of the response. That means that if one ommits the dataType in an ajax call, the correct 'Content-type' header (application/json) should be used in the response by the PHP code. If you are not sure that this is the case, use dataType: 'json'.

Finally, one can always use JSON.parse(data); to deserialize a JSON array if it is returned in string format.

edited Aug 3, 2018 at 22:07

answered Aug 3, 2018 at 21:32

iiirxs

4,6022 gold badges23 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Arijit Aich Over a year ago

Tried removing dataType: "text", but its still not working

iiirxs Over a year ago

Did you try to output the returned data in your console? Use console.log(data); in your success function to see what you are really getting as a response.

Arijit Aich Over a year ago

console response for data is sending the exact information that is being sent by comm.php which is: { "name": "Rehan", "location": "Pune", "description": "hello hi", "created_by": 13692, "username": "xyz", }, { "name": "Sameer", "location": "Bangalore", "description": "how are you", "created_by": 13543, "username": "abc", }, The undefined response is generated once which should be twice. The code is terminated the moment it returns a single result. Also the values are still undefined.

iiirxs Over a year ago

which is not a valid JSON. 1. You should have opening and closing brackets because you want to get an array of json objects. 2. You have a comma after "username": "xyz" in the first JSON object but you shouldn't 3. You have a comma after "username": "abc" in the second JSON object but you shouldn't 4. You have a comma after the last } where you should have only the closing bracket

Arijit Aich Over a year ago

This is my response now: [ { "name": "Rehan", "location": "Pune", "description": "hello hi", "created_by": 13692, "username": "xyz" }, { "name": "Sameer", "location": "Bangalore", "description": "how are you", "created_by": 13543, "username": "abc" }] But the response is still the same. One result with undefined values.

|

Collectives™ on Stack Overflow

How to display multiple records fetched in JSON from server using Ajax?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related