How to push values form a php associative array to jquery array?

Question

I am creating the associative array in php in a loop like this:

$coordinates[] = array("coordinates"=>[$lat, $lng], "site"=>"ext");
$coordinates[] = array("coordinates"=>[$lat, $lng], "site"=>"curr");

Which gives:

[0]=>
  array(2) {
    ["coordinates"]=>
    array(2) {
      [0]=>
      string(18) "40.836132854296686"
      [1]=>
      string(17) "8.404270310882566"
    }
    ["site"]=>
    string(4) "curr"
  }
  [1]=>
  array(2) {
    ["coordinates"]=>
    array(2) {
      [0]=>
      string(10) "40.8998985"
      [1]=>
      string(9) "9.5177142"
    }
    ["site"]=>
    string(4) "curr"
  }
  [2]=>
  array(2) {
    ["coordinates"]=>
    array(2) {
      [0]=>
      string(17) "40.71976910000001"
      [1]=>
      string(17) "8.563560499999994"
    }
    ["site"]=>
    string(3) "ext"
  }
}

Now I Need to push each pair coords eg:

["coordinates"]=>
    array(2) {
      [0]=>
      string(10) "40.8998985"
      [1]=>
      string(9) "9.5177142"
    } 

into a JS array and do the same for another array with [site] values eg:

["site"]=>
    string(3) "ext"

In JS I do:

      var coordsJson = '<?php echo json_encode($coordinates); ?>';
      var coords = JSON.parse(coordsJson);
      console.log(coordsJson);

And that gives me:

[{"coordinates":["40.836132854296686","8.404270310882566"],"site":"curr"},{"coordinates":["40.8998985","9.5177142"],"site":"curr"},{"coordinates":["40.71976910000001","8.563560499999994"],"site":"ext"}]

I'd need the coords to be a valid array with the pair coords as objects and push [site] to an array like site = [] but I am not sure how to get values form the associative array.

I tried to push

myCoords.push(coords['coordinates']);

But that's wrong. I believe I should be looping the json response but how to push to JS then?

UPDATE

I basically need the js array structured like this:

0: (2) ["40.836132854296686", "8.404270310882566"]
1: (2) ["40.8998985", "9.5177142"]
2: (2) ["40.71976910000001", "8.563560499999994"]

And have the same but for an array site[] , literally looking for 2 arrays coords[] and site[]

Answer 1

Taking from Get specific element from each sub array , you need to use array_column to get the specific sub array values.

$coords = array_column($coordinates, 'coordinates');
$sites = array_column($coordinates, 'sites');

I couldn't test it on my side as I am not on a PC. Please let me know if this works.

Answer 2

Working with arrays in JavaScript is a pleasure when compared to native PHP. You could always use a loop but I'd be inclined to take the functional approach instead.

First, let's simplify moving the data from PHP to JS:

var coordsJson = '<?php echo json_encode($coordinates); ?>';
var coords = JSON.parse(coordsJson);

You don't need to wrap it in a string and then parse.

const coordinates = <?php echo json_encode($coordinates); ?>;

I should note that my example is going to be written in ES6.

Next we can use map to build our new arrays containing the data we need.

// this could be a one liner but expanding for explanatory purposes.
const coordinatePairs = coordinates.map((coordinate) => {
    // here we're using the spread operator to expand our object.
    // it's a simple way to convert an object into an array.
    return [...coordinate.coordinates];
});

Now lets follow a similar, albeit simpler, process for sites.

const sites = coordinates.map((coordinate) => (coordinate.site));