Map color change php to .js

Question

I am working on a USA map with states to which states have available properties by changing the color of the state.
I am using Leaflet for the map and have used the Interactive Choropleth Map ( https://leafletjs.com/examples/choropleth/ ) as a basis to build this.

I have added "availability":"2" to the us-states.js file, this is where the number of properties will be shown. I would like to insert a php query into the .js file to pull the number of properties for that state. Here is a sample from the us-states.js file so that you can see the layout:

{"type":"Feature","id":"02","properties":{"name":"North Carolina","availability":"2"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-131.602021,55.117982],

And I am using this to change color:

// get color depending on population density value
function getColor(d) {
return d > 1 ? '#e1cb7f' :
               '#173e34';
    }

    function style(feature) {
        return {
            weight: 2,
            opacity: 1,
            color: 'white',
            dashArray: '',
            fillOpacity: 1.9,
            fillColor: getColor(feature.properties.availability)
        };
}

I have added this to the functions.php file:

wp_register_script( 'scount', get_template_directory_uri() . '/assets  /js/us-states.js' );

// Localize the script with our data that we want to use
$args = array(
'post_type' => 'property',
'fields' => 'ids',
'meta_query' => array(
array(
  'key' => 'state',
  'value' => 'NC'
)
)
);
$results = new WP_Query($args);
$completed = count($results->posts);
wp_localize_script( 'scount', 'completed', $completed );

// The script can be enqueued now or later.
wp_enqueue_script( 'scount' );

And I using this to get the result into the .js file:

alert(completed);

I am getting the result working, this is the output when I view in developer tools:

<script type='text/javascript'>
/* <![CDATA[ */
var completed = 2;
/* ]]> */
</script>

This is the page where the map is located: https://www.thekeithcorp.com/interactive-map/

But it is not changing the map state color! Am I calling incorrectly in the js file? Pulling my hair out, any help would be appreciated!

EDIT

I have isolated the problem to the alert(completed); added to the js file. the page breaks when I add the alert to the js file. Any ideas on how I should add this to the .js file?

This is how it is added:

{"type":"Feature","id":"37","properties":{"name":"North Carolina","availability":alert(completed);},"geometry":{"type":"Polygon","coordinates":[[[-80.978661,36.562108],[-80.294043,36.545677],[-79.510841,36.5402],[-75.868676,36.551154],[-75.75366,36.151337],[-76.032984,36.189676],[-76.071322,36.140383],[-76.410893,36.080137],[-76.460185,36.025367],[-76.68474,36.008937],[-76.673786,35.937736],[-76.399939,35.987029],[-76.3616,35.943213],[-76.060368,35.992506],[-75.961783,35.899398],[-75.781044,35.937736],[-75.715321,35.696751],[-75.775568,35.581735],[-75.89606,35.570781],[-76.147999,35.324319],[-76.482093,35.313365],[-76.536862,35.14358],[-76.394462,34.973795],[-76.279446,34.940933],[-76.493047,34.661609],[-76.673786,34.694471],[-76.991448,34.667086],[-77.210526,34.60684],[-77.555573,34.415147],[-77.82942,34.163208],[-77.971821,33.845545],[-78.179944,33.916745],[-78.541422,33.851022],[-79.675149,34.80401],[-80.797922,34.820441],[-80.781491,34.935456],[-80.934845,35.105241],[-81.038907,35.044995],[-81.044384,35.149057],[-82.276696,35.198349],[-82.550543,35.160011],[-82.764143,35.066903],[-83.109191,35.00118],[-83.618546,34.984749],[-84.319594,34.990226],[-84.29221,35.225734],[-84.09504,35.247642],[-84.018363,35.41195],[-83.7719,35.559827],[-83.498053,35.565304],[-83.251591,35.718659],[-82.994175,35.773428],[-82.775097,35.997983],[-82.638174,36.063706],[-82.610789,35.965121],[-82.216449,36.156814],[-82.03571,36.118475],[-81.909741,36.304691],[-81.723525,36.353984],[-81.679709,36.589492],[-80.978661,36.562108]]]}},

HELP!

Answer 1

I got this to work using this: ( JSON.stringify(completed) )

Without the ;