Failing to parse json after sending an ajax request

Question

Javascript:

$(document).ready(function() {
    $('#redeem_token').click(function() {
        var username = $('#username').val(); ///* input id=username field *//
        var password = $('#password').val(); ///* input id=password field *//
        var password2 = $('#password2').val();  ///* input id=password2 field *//       
        var dataString = '{"username":"'+username+'","password":"'+password+'","password2":"'+password2+'"}';
        
        $.ajax({
            type: "POST",
            url: "api/auth/register.php",
            data: dataString,
            dataType: 'json',
            success: function(json) {
   console.log(JSON.stringify(json.main));
   $.each(json.main, function(idx, messages){
    $("#redeem").html('' + messages.status + "");
                       });
            }
        });
        
        return false;
    });
});

Response example:

{"main":{"messages":{"status":"Success","message":"Registration successful!"}}}

I dont know what am i doing wrong, nothing is showing up in my id=redeem Html field. I've searched everywhere still not found.

Answer 1

New Code: i wrote $("#redeem").html(' '+messages.message+' '); instead of $("#redeem").html('' + messages.status + ""); its working perfect now