how to loop through json response data using ajax jquery?

Question

I'm trying to loop through a json response with ajax jquery but I can't display the result.

Here is the code Im using:

data.php

function platformsList(){
    $query = "SELECT id, name, slug, icon FROM `platforms` ORDER BY id ASC";
    $statement   = $GLOBALS['PDO']->prepare($query);
    $statement->execute();
    $data = array();
    while ($row = $statement->fetch(PDO::FETCH_ASSOC)) {
        $data[] = $row;
    }
    return json_encode($data);
}
if(isset($_GET['platforms']) AND $_GET['platforms'] == 'platforms'){
    $platforms = platformsList();
    $response = json_decode($platforms);
    print_r($response);
}

jquery :

$(document).ready(function(){
        $.ajax({
            url: "core/data.php",
            method: "GET",
            data :'platforms=platforms',
            dataType: 'json',
            contentType: false,
            cache: false,
            processData: false,
            success: function(response) {
                for(var i = 0; response.length < i; i++) {
                    $('.platformsList').html('<li>'+response.name+'</li>');
                }
            }
        })
    });

What I want is to display the result in the div below:

<div>
    <ul class="platformsList"></ul>
</div>

EDIT:

WHen I debug I get this result :

Array
(
    [0] => stdClass Object
        (
            [id] => 1
            [name] =>  Platform 1
            [slug] => dates
            [icon] => dates.webp
        )

    [1] => stdClass Object
        (
            [id] => 2
            [name] => Platform 2
            [slug] => honey
            [icon] => honey.webp
        )
.
.
... etc

In what way does this fail? When you debug, what is the content of the response variable? — David
– David, Commented Mar 15, 2021 at 18:07
Might need to check the proper formation of an unordered list <ul class="platformsList"></li> ?? — RiggsFolly
– RiggsFolly, Commented Mar 15, 2021 at 18:11
the probleme here is that I can't display the result in html page — Richard Branson
– Richard Branson, Commented Mar 15, 2021 at 18:13

Enrico Dias · Accepted Answer · 2021-03-15 18:27:29Z

3

You are replacing the contents of .platformsList in each iteration. You need to either create a buffer or use append().

success: function(response) {

    let buffer = '';

    for (var i = 0; response.length < i; i++) {

        buffer += '<li>'+response[i].name+'</li>';

    }

    $('.platformsList').html(buffer);

}

edited Mar 15, 2021 at 18:27

answered Mar 15, 2021 at 18:20

Enrico Dias

1,48713 silver badges23 bronze badges

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

2 Comments

Richard Branson Over a year ago

still same problem. Can't display anything

Enrico Dias Over a year ago

@RichardBranson response seems to be an array. I edited the example code.

While1 · Accepted Answer · 2022-04-28 17:01:44Z

2

use response[i].name to access the array

success: function(response) {
                let buffer = '';
                
                for (var i = 0; i < response.length; i++) {
                    buffer += '<li>'+response[i].name+'</li>';
                }
                
                $('.platformsList').html(buffer);
            }

edited Apr 28, 2022 at 17:01

answered Mar 15, 2021 at 18:29

While1

7244 silver badges6 bronze badges

3 Comments

Richard Branson Over a year ago

Thank you! It works but instead of .html() I used .append()

Enrico Dias Over a year ago

@RichardBranson note that using jquery's append() will update the DOM multiple times unnecessarily. This operation is resource intensive and may render your page slow with large datasets. Using a buffer is advisable.

While1 Over a year ago

append() and buffer is recommended, I tried to stick to the source

RiggsFolly · Accepted Answer · 2021-03-15 18:36:12Z

1

Dont use GLOBALS like that, instead pass that as a paramter to the function
If you have no paramters to bind to the query a simple ->query() is easier and quicker.
You want to send a json_encode() JSON String to the AJAX call, your are decoding it back to a PHP array and then sending a print_r() Javascript wont understand that.

function platformsList($conn){
    $query = "SELECT id, name, slug, icon FROM `platforms` ORDER BY id ASC";
    $result   = $conn->query($query);
    
    $data = $result->fetch_all(MYSQLI_ASSOC);
    
    return $data;
}

if(isset($_GET['platforms']) AND $_GET['platforms'] == 'platforms'){
    $platforms = platformsList($PDO);
    echo json_encode($platforms);
}

And the javascript need to process that array

success: function(response) {
    for(var i = 0; response.length < i; i++) {
        buf += '<li>'+response[i].name+'</li>';
    }
    $('.platformsList').html(buf);
}

edited Mar 15, 2021 at 18:36

answered Mar 15, 2021 at 18:16

RiggsFolly

94.7k22 gold badges108 silver badges152 bronze badges

1 Comment

Richard Branson Over a year ago

and how about the jquery loop? is it correct? because I still get no result!

Collectives™ on Stack Overflow

how to loop through json response data using ajax jquery?

3 Answers 3

2 Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related