Ajax call to PHP action/function with array as data (in wordpress)

Question

I'm trying to push an array from jquery to a php function and I'm out of options to make it work. I've tried multiple options; $_request, $_post, with JSON.stringify, without JSON.stringify, ...

But I keep getting 'null'; can't figure out the right combination. Someone who's willing to explain me why it's not working and how to fix?

JQuery code:

    var userIDs = [];
    
    $( "tr.user-row" ).each(function() {
        var userID = $(this).attr("data-userid");
        userIDs.push(userID);
        
    });
    
    var jsonIDs = JSON.stringify(userIDs);
    
    $.ajax({
        url: ajaxurl, // Since WP 2.8 ajaxurl is always defined and points to admin-ajax.php
        data: {
            'action':'built_ranking', // This is our PHP function below
            'data' : {data:jsonIDs},
        },
        dataType:"json",
        success:function(data){ 
            // This outputs the result of the ajax request (The Callback)
            //$("tr[data-userid='"+userID+"'] td.punten").html(data.punten);
            //$("tr[data-userid='"+userID+"'] td.afstand").html(data.afstand);
            console.log(data);
        },  
        error: function(errorThrown){
            window.alert(errorThrown);
        }
    });

PHP code:

function built_ranking(){
    
    if ( isset($_REQUEST) ) {
        
        $data = json_decode(stripslashes($_REQUEST['data']));
        foreach($data as $d){
             echo $d;
        }
        
        print json_encode($data);
                
        //$testResult = array("points"=>"test", "afstand"=>"test");
        //print json_encode($testResult);
    }
    
    
    // Always die in functions echoing AJAX content
   die();
}
add_action( 'wp_ajax_built_ranking', 'built_ranking' );

If I print the $testResult it returns the array and I can use the data back in jquery, so the function is called. I've based the code on Send array with Ajax to PHP script I've multiple ajax calls with $_request instead of $_post and they are working fine. But maybe they can't handle arrays? I've no idea... ^^

Answer 1

What I learned from this question and the help I got: don't guess, debug. try to find ways to see what is posted, what is received, ...

You can read how to 'debug' in the comments of the original question. Useful for starters as me ;)

Working code:

JQuery

var jsonIDs = JSON.stringify(userIDs);

$.ajax({
    type: 'POST',
    url: ajaxurl, // Since WP 2.8 ajaxurl is always defined and points to admin-ajax.php
    data: {
        'action':'built_ranking', // This is our PHP function below
        'data' : jsonIDs,
    },
    dataType:"json",
    success:function(data){ 
        // This outputs the result of the ajax request (The Callback)
        //$("tr[data-userid='"+userID+"'] td.punten").html(data.punten);
        //$("tr[data-userid='"+userID+"'] td.afstand").html(data.afstand);
        console.log(data);
    },  
    error: function(errorThrown){
        window.alert(errorThrown);
    }
}); 

PHP

function built_ranking(){
    
    if ( isset($_POST) ) {
        $data = json_decode(stripslashes($_POST['data']));

        print json_encode($data);
                
        //$testResult = array("points"=>"test", "afstand"=>"test");
        //print json_encode($testResult);
    }
    
    
    // Always die in functions echoing AJAX content
   die();
}
add_action( 'wp_ajax_built_ranking', 'built_ranking' );