AJAX cannot access an object data value passed from php - php

Question

I have a php.php file to receive data then pass the result back to AJAX, like this:
<?php
$p1 = $_POST["p1"];
$c1 = $_POST["c1"];
$resultx['r1'] = "XXX";
$resultx['r2'] = 0;
$resultx['r3'] = 100;
$resultx['r4'] = 1000;
echo json_encode($resultx);
And in my js file I have:
$.ajax({
url: 'php.php',
type: 'POST',
data: {
p1: 5,
c1: 100
},
cache: false,
success: function (resultx) {
var result = resultx;
console.log(result);
var my1 = document.getElementById('my1');
var my2 = document.getElementById('my2');
var my3 = document.getElementById('my3');
var my4 = document.getElementById('my4');
my1.textContent = "Id : "+result.r1;
my2.textContent = "Rank : "+result.r2;
my3.textContent = "Total players : "+result.r3;
my4.textContent = "Top credit : "+result.r4;
},
});
The my1 my2 my3 my4 fields all print with undefined even though the console log show the value of:
{"r1":"XXX","r2":0, "r3":100, "r4":1000}
When I change the statement
var result = resultx;
to
var result = JSON.parse(resultx)
the javascript console prints a error message of uncaught syntax error unexpected token.
Please help!