Update user meta via ajax from frontend, saving issue

Question

I want to save/update a custom user meta field from the frontend, via ajax. This field should hold a list of post ID´s. No double ID´s should allowed.

My problem is that my field value get saved as an multidimension array, every time I update it.

For example the saved data looks like this:

Array ( [0] => Array ( [0] => Array ( [0] => [1] => 70 [2] => 79 ) [1] => 79 ) [1] => 93 )

I just need/want a single array.

I tried different things regarding the $single parameter of get_user_meta(), as it seems that this is the problem. But I was not able to find a solution.

I think the problem is the format of the value I get with get_user_meta().

In my enqueue function, I use wp_localize_script to add values to my custom JS file. Here I would like to check if a value was already saved, and send this value to the JS file.

(I added comments in the code)

function my_custom_enqueue() {
    if ( is_user_logged_in() ) {

        wp_enqueue_script( 'ajax-script', plugins_url('ajax.js', __FILE__), array('jquery') );

        $current_user = wp_get_current_user();
        $saved_ids = get_user_meta($current_user->ID, 'postlist', false); 
        // if changed to true, jquery is not working anymore, but if true it can also be an array

        // do something if $saved_ids is empty ?! check if it is an array?!

        wp_localize_script( 'ajax-script', 'my_ajax_object', array( 
            'ajax_url' => admin_url( 'admin-ajax.php' ),
            'saved_ids' => $saved_ids,
        ) );
    }
}
add_action( 'wp_enqueue_scripts', 'my_custom_enqueue' );

In my ajax.js file:

jQuery(document).ready(function($){

    //get the $saved_ids value
    var postIdsToCompare = my_ajax_object.saved_ids;

    $(document).on('click', '.add-to-list', function(e) {
        e.preventDefault();  

        // get post id from data-id of element
        var idToAdd = $(this).attr('data-id');          

        // see if post id already exists in postIdsToCompare
        // this is not working anymore because of the multidimension arrays
        var found = $.inArray(idToAdd, postIdsToCompare);

        if (found >= 0) {
            // Element was found, remove it from array
            postIdsToCompare.splice(found, 1);
        } else {
            // Element was not found, add it to array
            postIdsToCompare.push(idToAdd);
        }

        var data = {
            'action': 'make_post_list', // name of php function "wp_ajax_make_post_list"
            'ids_to_compare': postIdsToCompare, // to use $_POST['ids_to_compare']
        };

        $.post(my_ajax_object.ajax_url, data, function(response) {
            alert('Added');
        });
    });
});

My ajax callback function to save/update the field.

add_action( 'wp_ajax_make_post_list', 'make_post_list_callback' );
function make_post_list_callback() {

    global $wpdb; // this is how you get access to the database

    // Ensure we have the data we need to continue
    if( ! isset( $_POST ) || empty( $_POST ) || ! is_user_logged_in() ) {
        exit;
    }

    $user_id = get_current_user_id();

    $saved_ids = get_user_meta($user_id, 'postlist', true);

    $ids_to_compare = $_POST['ids_to_compare'];

    //save user meta here
    update_user_meta(
        $user_id, // user id
        'postlist', // meta key
        $ids_to_compare, // meta value
        $saved_ids // prev value, tried without it also
    );

    wp_die();
}

Answer 1

I wanted to update this older question.

I got this working or at least I got the saving worked out.

Thanks Tom J Nowell for your input. I considerd using the REST API yes, I looked at some introductions, but this went over my head. The REST API but also AJAX is kinda new to me, and I havent really worked with these things. I will especially look into using the REST API.

With that in mind, I think the code could be a lot better and cleaner, but I was just playing around and thought I should post my answer anyway. Its also kinda bare-bones...

The Enqueue code looks like this:

function my_custom_enqueue() {
    if ( is_user_logged_in() ) {

        wp_enqueue_script( 'ajax-script', plugins_url('ajax.js', __FILE__), array('jquery') );

        wp_localize_script( 'ajax-script', 'my_ajax_object', array( 
            'ajax_url' => admin_url( 'admin-ajax.php' ),
        ) );

    }
}
add_action( 'wp_enqueue_scripts', 'my_custom_enqueue' );

The ajax.js file looks like:

jQuery(document).ready(function($){

    $(document).on('click', '.add-to-list', function(e) {
        e.preventDefault();  

        // get post id from data-id of element
        var idToAdd = $(this).attr('data-id');   

        var data = {
            'action': 'make_post_list', // name of php function "wp_ajax_make_post_list"
            'id_to_add': idToAdd, // to use $_POST['ids_to_add']
        };

        $.post(my_ajax_object.ajax_url, data, function(response) {
            console.log (response); // show response in console
            alert(response); // show response as alert
        });

    });

});

And finally the callback function:

function make_post_list_callback() {

    global $wpdb; // this is how you get access to the database

    // Ensure we have the data we need to continue
    if( ! isset( $_POST ) || empty( $_POST ) || !is_user_logged_in() ) {
        echo 'Oops! Try again.';
        exit;
    }

    $user_id = get_current_user_id();

    // get array of already saved ID´s
    $saved_ids = get_user_meta($user_id, 'postlist', true);

    // new ID to add to array
    $id_to_add = $_POST['id_to_add'];

    // check if ID already exist in array,
    // only if it doesnt, we add it
    if( in_array( $id_to_add, $saved_ids ) ) {

        echo 'Failed: Post already in list.';

    } else {

         //if list is empty, initialize it as an empty array
         if($saved_ids == ''){
            $saved_ids = array();
         }

        // push the new ID inside the array
        array_push( $saved_ids, $id_to_add );

        if ( update_user_meta( $user_id, 'postlist', $saved_ids ) ) {
            echo 'Success!';
        } else {
            echo 'Failed: Could not update user meta.';
        }
    }

    wp_die(); // this is required to terminate immediately and return a proper response

}
add_action( 'wp_ajax_make_post_list', 'make_post_list_callback' );

With this a logged in user is able to click a button on a post, the post ID is than saved in the meta of the user, the saved meta data looks like:

Array ( [0] => 70 [1] => 76 [2] => 343 [3] => 375 [4] => 40 )