title: Need ajax call to return json array and execute javascript function
body: <p>First of all, I should clarify that this is in Wordpress. I'm having trouble returning a json array and executing a javascript function using that json array. I currently have a list of 8 projects in the database. Each project has a title, latitude, longitude, status (complete or incomplete), industry(i.e. oil, petrol, etc.), and state. The ajax call executes based on three dropdown menus for status, industry, and state. The ajax call then creates a new wp_query based on that criteria, and then replaces the list of projects on the page. This all works fine.</p>
  
  <p>However, the list also corresponds to a google map. All projects have markers on the map when the page loads. Whenever the ajax filtering happens, I need to remove and replace those markers with the new listings. This is where I need the json array in order to add the markers to the map. I just can't figure out how to return the json array and then use it in a javascript function to add the markers.</p>
  
  <p>Below is the ajax call:</p>
  
  <pre><code>$( "#states" ).change(function() {
  
          // Get values from all three dropdown menus
          var state = $('#states').val();
          var markets = $('#markets').val();
          var services = $('#services').val();
  
          $('#project-list').fadeOut();
  
          // This does the ajax request
          $.ajax({
              url: ajaxurl, 
              data: {
                  'action' : 'json_info',
                  'state' : state,
                  'status' : markets,
                  'services' : services
              },
              success:function(data) {
                  // This outputs the result of the ajax request
                  $('#project-list').html( data );
                  $('#project-list').fadeIn();
                 // this is where I get lost
                 addMarkers(data);
  
              }   /*,
              error: function(errorThrown){
                  console.log(errorThrown);
              }*/
          }); // end of ajax call
  
      }); // end of click function
  </code></pre>
  
  <p>And in the json_info action, I have the following:</p>
  
  <pre><code>function json_info() {
  
      // The $_REQUEST contains all the data sent via ajax
      if ( isset($_REQUEST) ) {
  
  ....
  
      // create a new array to store projects
      $projectsArray = array();
  
          // query results by page template
          $my_query = new WP_Query($pages);
  
  ....        
  
          if($my_query-&gt;have_posts()) : 
  
                  while($my_query-&gt;have_posts()) : 
                      $my_query-&gt;the_post();  
  
                      // $projects array is filled with the results of the query loop
                      $projectsArray[] = array(
                      'title' =&gt; get_the_title(),
                      'lat' =&gt; get_field('latitude'),
                      'long' =&gt; get_field('longitude'),
                      'status' =&gt; get_field('status'),
                      'industry' =&gt; get_field('industry'),
                      'state' =&gt; get_field('state')
                      //'num' =&gt; $n
                      );  
  
                      // this outputs each title into a list
                      echo '&lt;li&gt;'.the_title().'&lt;/li&gt;';
  
              endwhile; endif;
  
           } // end of isset
  
           ?&gt;
  
           &lt;script&gt;
                  // set jqueryarray before the ajax file in order to parse the PHP, I'm not sure if this is correct???
                  var myjsonarray = &lt;?php echo json_encode($projectsArray); ?&gt;;
              &lt;/script&gt;
  
           &lt;?php
           // I'm not sure if this is correct???        
           echo json_encode($projectsArray);
  
      // Always die in functions echoing ajax content
     die();
  } 
  </code></pre>
  
  <p>I condensed the function for the sake of saving space. So I just put .... where the variables are being set, as well as where the wp_query args are set, as that all works just fine.</p>
  
  <p>So the question is, how do I output the list of titles, yet return the json array at the same time? And then use that json array to execute a javascript function to add markers on the map? I know how to used the json info to add the markers, just not how to access it in a javascript function that is called by an ajax success. Any help would be appreciated, as I am stuck after searching all over for an answer.</p>
  
  <p>EDIT: Adding the photo below to show what happens when I echo both the list of titles, as well as the json encoded array. I do need the list items for the titles to output like that, but I don't want the json array to echo to the screen. I only need to be able to access it in the ajax success call in order to execute a javascript function.<img src="https://i.stack.imgur.com/gsdCe.png" alt="Website Screenshot"></p>