How to push to jquery array from php using ajax?

Question

I run the following on the server (PHP), where I loop my posts and I grab some coordinates I have in a gmap field:

      $location = get_field('location');
      $lat = $location['lat'];
      $lng = $location['lng'];

I then create a single pair of lat and lng coordinate like this:

      $coordinates = $lat.", ".$lng;
      echo $coordinates;

And then on the client in JavaScript ajax success I push each of those pair in an array var coords = []; which I have in the footer.

But I get a weird result in console:

["4"]
(index):148 (2) ["4", "0"]
(index):148 (3) ["4", "0", "."]
(index):148 (4) ["4", "0", ".", "7"]
(index):148 (5) ["4", "0", ".", "7", "2"]
(index):148 (6) ["4", "0", ".", "7", "2", "7"]
(index):148 (7) ["4", "0", ".", "7", "2", "7", "2"]
(index):148 (8) ["4", "0", ".", "7", "2", "7", "2", "0"]...

So this is the whole code:

PHP

      function data_fetch(){
        $dates = $_POST['dates'];
        $dates = explode(',', $dates);
        $args = array(
          'meta_query' => array(
            array(
              'key' => 'anno',
              'value' => array($dates[0], $dates[1]),
              'compare' => 'BETWEEN',
              'type' => 'NUMERIC'
            ),
          )
        );
        $query = new WP_Query( $args );
        if( $query->have_posts() ): while( $query->have_posts() ) : $query->the_post();
          $location = get_field('location');
          $lat = $location['lat'];
          $lng = $location['lng'];
          $coordinates = $lat.", ".$lng;
          echo $coordinates;
        endwhile; endif;
        die();
      }

JavaScript

$(document).ready(function() {
  $("#searchNations").on("click", function() {
    //clearOverlays();
    fetch(datesSearch);
  });
  fetch(datesSearch);

  function fetch(datesSearch) {
    $.ajax({
      url: '<?php echo admin_url('
      admin - ajax.php '); ?>',
      type: 'post',
      dataType: 'json',
      data: {
        action: 'data_fetch',
        dates: datesSearch
      },
      success: function(data) {
        var data = $.parseJSON(data);
        for (var i = 0; i < data.length - 1; i++) {
          coords.push(data[i]);
          console.log(coords);
        };
      }
    });
  }
});

Interesting, you need to console.log(data) on the first line of the success handler. You are not getting back what you think ("number,numner"). — Randy Casburn
– Randy Casburn, Commented Jun 30, 2019 at 21:49
@RandyCasburn also changed the concatenation to $coordinates = $lat+", "+$lng; as it's php instead of $coordinates = $lat.", ".$lng; as I had — rob.m
– rob.m, Commented Jun 30, 2019 at 21:51
@RandyCasburn gosh, yes it is php, I was correct to use the dots, changed it back now — rob.m
– rob.m, Commented Jun 30, 2019 at 21:53
@RandyCasburn basically now I am having: 40.7272074, 8.57526649999999840.7197406, 8.563512299999957 which is correct but wrongly written, they are 4 coordinates and two pairs, should be 40.7272074, 8.575266499999998, 40.7197406, 8.563512299999957 so it is not splitting a single pairs — rob.m
– rob.m, Commented Jun 30, 2019 at 21:54

msg · Accepted Answer · 2019-06-30 22:06:26Z

1

In php you are outputting your coordinates as a string, but processing them in javascript as json. You have to push the coordinates into an array and encode them:

if( $query->have_posts() ): 
    $coordinates = [];
    while( $query->have_posts() ) : $query->the_post();
        $location = get_field('location');
        $lat = $location['lat'];
        $lng = $location['lng'];
        $coordinates[] = $lat.", ".$lng;
    endwhile;
    echo json_encode($coordinates);
    die;
endif;

answered Jun 30, 2019 at 22:06

msg

8,2363 gold badges17 silver badges36 bronze badges

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

2 Comments

rob.m Over a year ago

ok thanks a lot, it works but we also need to remove the -1 in the js data loop from for (var i = 0; i < data.length - 1; i++) { to for (var i = 0; i < data.length; i++) {

msg Over a year ago

It's an array with two string elements. Remove your parseJSON call, as you told $.ajax that it should expect a json response and doing the decoding for you

Collectives™ on Stack Overflow

How to push to jquery array from php using ajax?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related