AJAX loop array met data

Met een JSON header boven je output zal jQuery waarschijnlijk automatisch de response als naar een array omzetten:

header('Content-type: application/json; charset=utf-8'); // <--
echo json_encode($result_array);

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.

Als ik de php file echo krijg ik inderdaad Json terug met onderstaande aangepaste code

<?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

[size=xsmall]Toevoeging op 01/12/2019 14:47:53:[/size]

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.

Vergelijk eens wat je doet in je oorspronkelijke code:

<?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:

<?php
while($result_array = mysqli_fetch_array($result)){
    echo json_encode($result_array); // meerdere sets JSON-code
}
?>

<?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:

    {"catname":"naam 1","catdescription":"blabla 1"},
    {"catname":"naam 2","catdescription":"blabla 2"},

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

				<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>

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:

$.each(response(function( i ){ ... }))
//             ^                     ^

Met

$.each(response, function( i ){ ... })
//             ^

Dit is ook iets wat je in afzondering kunt testen?

<!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>

Als het goed is krijg je de echo terug als string, console.log(typeof response); je dient in je post() "json" moeten toevoegen.

jQuery.post(url, data, function() {},"json");

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

<!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

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