AJAX loop array met data

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Loek Lemmens

Loek Lemmens

01/12/2019 12:47:39
Quote Anchor link
Hallo,


De data uit de database wil ik graag met AJAX zichtbaar maken. Dit wil ik doen door een array terug te geven vanuit PHP.
D.m.v. Jquery wil ik dan de data netjes presenteren.

De dat terug krijgen zonder een array heb ik werkend maar dan kan ik de data niet presenteren zoals ik zou willen.
Dus ben ik op onderzoek uitgegaan maar loop gewoon vast hierop.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
<?php
        $connection
= mysqli_connect($wpdb->dbhost, $wpdb->dbuser, $wpdb->dbpassword, $wpdb->dbname);
        $sql = "SELECT catname, catdescription FROM $cats_table";
        $result = mysqli_query($connection,$sql);
        while($row = $result->fetch_assoc()){
            array_push($result_array, $row);
        }

        echo json_encode($result_array);
        mysqli_close($connection);
?>


Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
                    jQuery(document).ready(function($) {
                        select();
                        function select(){
                            var data = {
                                'action': 'select',
                                'todo': 'catselect',
                            };
                            jQuery.post(ajaxurl, data, function(response) {
                                console.log(response);
                            });
                        }
                    });
                </script>

uileg:
Var data 'action' is de PHP functie die word aangeroepen
Var data 'todo' is een if statement waarin gekeken word welke info er gehaald moet worden.

Wie o wie zou mij kunnen helpen hiermee
Gewijzigd op 01/12/2019 12:47:59 door Loek Lemmens
 
PHP hulp

PHP hulp

19/03/2024 03:27:04
 
Rob Doemaarwat

Rob Doemaarwat

01/12/2019 13:22:52
Quote Anchor link
Met een JSON header boven je output zal jQuery waarschijnlijk automatisch de response als naar een array omzetten:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
header('Content-type: application/json; charset=utf-8'); // <--
echo json_encode($result_array);
 
Thomas van den Heuvel

Thomas van den Heuvel

01/12/2019 14:44:41
Quote Anchor link
En als je dan toch met UTF-8 werkt loont het ook de moeite om deze charset te selecteren bij het maken van een connectie met je database middels set_charset().

Waarom gebruik je trouwens niet gewoon fetch_all(MYSQLI_ASSOC)? Dan hoef je ook niet rij voor rij eenzelfde array te vullen.

Waar komt "ajaxurl" trouwens vandaan?

En als je data uit de database zichtbaar wil maken middels AJAX, dan zou ik eigenlijk een GET-request verwachten, en geen POST request? Dit zou het debuggen van het AJAX-script ook aanzienlijk makkelijker maken, omdat je die dan rechtstreeks aan zou kunnen roepen met parameters in de querystring. Wel even een andere header introduceren als je in dat script (tijdelijk) HTML-output produceert.
 
Loek Lemmens

Loek Lemmens

01/12/2019 14:45:07
Quote Anchor link
Als ik de php file echo krijg ik inderdaad Json terug met onderstaande aangepaste code
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
function select() {    
    if($_POST['todo'] == "catselect"){
        $connection     = mysqli_connect($wpdb->dbhost, $wpdb->dbuser, $wpdb->dbpassword, $wpdb->dbname);
        $sql            = "SELECT catname, catdescription FROM $cats_table";
        $result            = mysqli_query($connection, $sql);
        header('Content-type: application/json; charset=utf-8');
        while($result_array = mysqli_fetch_array($result)){
            echo json_encode($result_array);
        }
    }
}

?>


Als ik dan vervolgens in de log kijk van de browser geeft hij NULL aan bij de response

Toevoeging op 01/12/2019 14:47:53:

Het is een code wat ik gebruik in Wordpress. Wordpress heeft directe AJAXcalls geblokt en je bent verplicht om binnen Wordpress gebruik te maken van ajaxurl.
De var action en de var todo corresponderen met php functies die je kunt aanroepen.
Gewijzigd op 01/12/2019 14:45:52 door Loek Lemmens
 
Thomas van den Heuvel

Thomas van den Heuvel

01/12/2019 14:54:14
Quote Anchor link
Vergelijk eens wat je doet in je oorspronkelijke code:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
<?php
while($row = $result->fetch_assoc()){
    array_push($result_array, $row);
}

echo json_encode($result_array); // één set JSON-code
?>


in vergelijking met je laatste fragment:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
<?php
while($result_array = mysqli_fetch_array($result)){
    echo json_encode($result_array); // meerdere sets JSON-code
}
?>
 
Jop B

Jop B

01/12/2019 15:17:45
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
function select() {    
    if($_POST['todo'] == "catselect"){
        $connection     = mysqli_connect($wpdb->dbhost, $wpdb->dbuser, $wpdb->dbpassword, $wpdb->dbname);
        $sql            = "SELECT catname, catdescription FROM $cats_table";
        $result            = mysqli_query($connection, $sql);
        header('Content-type: application/json; charset=utf-8');
        while($row = mysqli_fetch_array($result)){
            $resultArray[] = $row;
        }

            echo json_encode($resultArray);
    }
}

?>


output:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
    {"catname":"naam 1","catdescription":"blabla 1"},
    {"catname":"naam 2","catdescription":"blabla 2"},
Gewijzigd op 01/12/2019 15:25:38 door Jop B
 
Loek Lemmens

Loek Lemmens

01/12/2019 15:50:21
Quote Anchor link
Nu krijg ik inderdaad het bovenstaande als resultaat :)

Nu heb ik een each functie bij het resultaat maar wederom krijg ik dan de data niet in de alert
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
                <script type="text/javascript">
                    jQuery(document).ready(function($) {
                        select();
                        function select(){
                            var data = {
                                'action': 'select',
                                'todo': 'catselect',
                            };
                            jQuery.post(ajaxurl, data, function(response) {
                                $.each(response(function( i ){
                                   alert(response[i].catname);
                                }));
                                      
                            });
                        }
                    });
                </script>
Gewijzigd op 01/12/2019 15:50:38 door Loek Lemmens
 
Thomas van den Heuvel

Thomas van den Heuvel

01/12/2019 16:21:12
Quote Anchor link
Je had ook de documentatie kunnen raadplegen, dan had je gezien dat de callback twee parameters bevat: een key en een value. De key heb je niets niet echt iets aan, want de geretourneerde JSON is een array van arrays/objecten. Ik zou met de value werken, en niet met de key waarbij je refereert aan het oorspronkelijke (resultaat)array.

Het is ook een naamloze functie. De functie "response" bestaat niet. Kijk je ook in je developer console (meestal onder de functietoets F12 in de "console" tab) naar JavaScript foutmeldingen? Dit script gaat waarschijnlijk hard onderuit.

Vergelijk:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
$.each(response(function( i ){ ... }))
//             ^                     ^

Met
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
$.each(response, function( i ){ ... })
//             ^


Dit is ook iets wat je in afzondering kunt testen?
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSON foreach</title>
<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>
</head>

<body>
<?php
$out
= array(
    array('catname' => 'one', 'catdescription' => 'description one'),
    array('catname' => 'two', 'catdescription' => 'description two'),
);

?>

<script type="text/javascript">
//<![CDATA[
$().ready(function() {
    var out = <?php echo json_encode($out); ?>;

    $.each(out, function(key, value) {
        // beide varianten werken
        alert(out[key].catname);
        alert(value.catname);
    });
});
//]]>
</script>
</body>
</html>
Gewijzigd op 01/12/2019 16:54:08 door Thomas van den Heuvel
 
H Kse

H Kse

01/12/2019 19:09:54
Quote Anchor link
Als het goed is krijg je de echo terug als string, console.log(typeof response); je dient in je post() "json" moeten toevoegen.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
jQuery.post(url, data, function() {},"json");
 
Thomas van den Heuvel

Thomas van den Heuvel

01/12/2019 21:42:43
Quote Anchor link
Nee, dat is niet per se nodig want jQuery probeert altijd een "intelligent guess" te doen (omtrent het dataType van de geretourneerde data). Het probleem is niet dat jQuery niet weet wat er teruggegeven wordt, het probleem is dat er op een verkeerde manier geïtereerd wordt over de teruggegeven items (zoals hierboven aangegeven). De JavaScript breekt waarschijnlijk gewoon met een syntaxfout.

Het is natuurlijk wel altijd beter om extra "hints" te geven als je weet wat je terug zou moeten krijgen, maar dit is niet verplicht / geen noodzakelijke voorwaarde voor correcte operatie.

EDIT: zoals de volgende code laat zien heb je geen dataType hint nodig
jquery.each.php
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSON foreach</title>
<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>
</head>

<body>
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
    $.post('jquery.each.ajax.php', {}, function(data) {
        $.each(data, function(key, value) {
            // beide varianten werken
            console.log('with key: '+data[key].catname);
            console.log('with value: '+value.catname);
        });
    });
});
//]]>
</script>
</body>
</html>


jquery.each.ajax.php
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
<?php
$out
= array(
    array('catname' => 'one', 'catdescription' => 'description one'),
    array('catname' => 'two', 'catdescription' => 'description two'),
);


header('Content-Type: application/json; charset=UTF-8');
echo json_encode($out);
?>
Gewijzigd op 01/12/2019 21:53:48 door Thomas van den Heuvel
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.