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[]

I'm having some difficulty in following your explanation. Can you provide an example of how you'd like your data to look in JS once finished? Are you suggesting you want two arrays in JavaScript, one containing all of your 'coordinates' and the other all of your 'site' values? — Nathan Dawson
– Nathan Dawson, Commented Aug 1, 2019 at 3:39
@rob.m - so you only need the coordinates part of the php array in the JSON side? — pinaki
– pinaki, Commented Aug 1, 2019 at 3:44
@pinaki no I need 2 arrays, one for the pair coords ["coordinates"] and one for the ["site"] — rob.m
– rob.m, Commented Aug 1, 2019 at 3:45

Nathan Dawson · Accepted Answer · 2019-08-01 03:58:09Z

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));

answered Aug 1, 2019 at 3:58

Nathan Dawson

19.4k3 gold badges59 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

rob.m Over a year ago

oh this is superb, so many things I didn't know eg the spread operator. Thanks a lot Nathan

rob.m Over a year ago

I'd like to use ES6, one question when we declare const is it considered a global var?

Nathan Dawson Over a year ago

const is a new way of declaring a variable. It means constant so it can't be reassigned unlike the alternative which is let. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

pinaki · Accepted Answer · 2019-08-01 03:50:14Z

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.

answered Aug 1, 2019 at 3:50

pinaki

5,4832 gold badges27 silver badges32 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related