Further up the page I am creating a filterComparables[] array
var filterComparables[<?=$x?>] = <?php echo json_encode($comparables); ?>;
At the bottom of the page I have:
var propID = parseInt($(this).closest('tr').find('.propID').text());
var property = filterComparables[propID];
I've debugged and propID correctly returns the int value, however when trying to access filterComparables[propID], it is returning "filterComparables is not defined at HTMLElement.". I've also tried strictly accessing filterComparables[0] with the same result.
Is it somehow because I am creating the index'd array in PHP up the page and it's not registering in the DOM? I'm confused.
Creating the indexed array in PHP should be fine, the way that you are declaring the filterComparables variable is likely the issue here, I messed around with it a bit and here's a simplified form of your script that I came up with that works for me:
<?php
$x = 1;
$comparables = array('foo','bar','bas');
?>
<script>
var filterComparables = [];
filterComparables[<?=$x?>] = <?php echo json_encode($comparables); ?>;
</script>
<p>some html for filler</p>
<script>
// var propID = parseInt($(this).closest('tr').find('.propID').text());
var property = filterComparables[1];
console.log(property);
</script>
Notice I declared filterComparables and typed it, then started assigning values to it.