title: Change HTML data based of AJAX JSON Results
body: <p>I'm having some trouble with an issue I'm working on.  Basically if someone clicks on a link with a list of offices, it will make an AJAX call to a file which queries the DB and returns the results in a JSON object.  At this point it needs to take those values and loop through HTML and apply those values accordingly.  What I can't figure out is exactly how to make that loop.  I'm hitting a wall so to speak.  This is in Wordpress and using a plugin called PODS.</p>
  
  <p><strong>The HTML</strong></p>
  
  <pre><code>&lt;?php
      $staff = new Pod('staff');
      $staff-&gt;findRecords('name ASC');
      $total_staff = $staff-&gt;getTotalRows();
  ?&gt;
  
  &lt;?php if( $total_staff&gt;0 ) : ?&gt;
  
      &lt;div class="twelve"&gt;
          &lt;div class="team-title"&gt;Corporate Office&lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="team-photo-container"&gt;
      &lt;?php while ( $staff-&gt;fetchRecord() ) : ?&gt;
              &lt;?php
  
                  $staff_id        = $staff-&gt;get_field('id');
                  $staff_name      = $staff-&gt;get_field('name');
                  $staff_title     = $staff-&gt;get_field('staff_title');
                  $staff_bio       = $staff-&gt;get_field('staff_bio');
                  $staff_fav_apps  = $staff-&gt;get_field('staff_favorite_apps');
                  $staff_office    = $staff-&gt;get_field('staff_office');
                  $staff_pic       = $staff-&gt;field('staff_pic.guid');
                  $staff_slug      = $staff-&gt;get_field('permalink');
              ?&gt;
              &lt;div class="packery"&gt;
                  &lt;div class="team-img"&gt;
                      &lt;div class="imgs"&gt;
                          &lt;img class="team-photo" src="&lt;?php echo $staff_pic; ?&gt;" alt=""&gt;
                          &lt;div class="img-info"&gt;
                              &lt;div class="mem-name"&gt;&lt;?php echo $staff_name; ?&gt;&lt;/div&gt;
                              &lt;div class="mem-title"&gt;&lt;?php echo $staff_title; ?&gt;&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="ind-bio"&gt;
                              &lt;div class="twelve columns btns"&gt;
                                  &lt;ul&gt;
                                      &lt;li&gt;
                                          &lt;a href="#" target="_self" class="read-more close"&gt;
                                              &lt;span&gt;
                                                  &lt;i class="foundicongen-remove"&gt;&lt;/i&gt;Close
                                              &lt;/span&gt;
                                          &lt;/a&gt;
                                      &lt;/li&gt;
                                      &lt;li&gt;
                                          &lt;a href="#" target="_self" class="read-more"&gt;
                                              &lt;span&gt;
                                                  &lt;i class="foundicon-plus"&gt;&lt;/i&gt;Share 
                                              &lt;/span&gt;
                                          &lt;/a&gt;
                                      &lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/div&gt;
                              &lt;h3 class="team-member-name"&gt;&lt;?php echo $staff_name; ?&gt;&lt;/h3&gt;
                              &lt;h5 class="team-member-title"&gt;&lt;?php echo $staff_title; ?&gt;&lt;/h5&gt;
                              &lt;p&gt;&lt;?php echo $staff_bio; ?&gt;&lt;/p&gt;
                              &lt;div class="twelve"&gt;
                                  &lt;ul&gt;
                                      &lt;li&gt;
                                          &lt;a href="#" target="_self" class="read-more"&gt;
                                              &lt;span&gt;
                                                  &lt;i class="foundiconsoc-youtube"&gt;&lt;/i&gt;Watch Video
                                              &lt;/span&gt;
                                          &lt;/a&gt;
                                      &lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/div&gt;
                              &lt;div class="twelve favorites team-title"&gt;
                                  &lt;span&gt;Favorite Apps:&lt;/span&gt;
                                  &lt;ul&gt;
                                      &lt;li&gt;
                                          &lt;a href="#" target="_self"&gt;
                                              &lt;span&gt;
                                                  &lt;?php echo $staff_fav_apps; ?&gt;
                                              &lt;/span&gt;
                                          &lt;/a&gt;
                                      &lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;?php endwhile ?&gt;
              &lt;?php endif ?&gt;
  </code></pre>
  
  <p><strong>The PHP/SQL</strong></p>
  
  <pre><code>&lt;?php
      $office = $_GET['office'];
  
      $link = mysql_pconnect("localhost", "username", "password") or die("Could not connect");
  
      mysql_select_db("database") or die("Could not select database");
  
      $arr = array();
  
      $query = mysql_query("SELECT name, staff_title, staff_bio, staff_favorite_apps, staff_office FROM table WHERE staff_office ='" . $office . "'");
  
      while($obj = mysql_fetch_object($query)) 
      {
          $arr[] = $obj;
      }
  
      echo '{"members":'. json_encode($arr). '}';
  
      ?&gt;
  </code></pre>
  
  <p><strong>The jQuery/AJAX</strong></p>
  
  <pre><code>$('.category-submenu li').click(function(){
          $.ajax({
              type: "GET",
              url: "http://localhost:8888/wp-content/themes/wp-foundation/load-team.php",
              dataType: 'json',
              data: {office: $(this).data('office')},
              beforeSend: function() {
                  $('#team-photo-container').html("&lt;div class='loader'&gt;&lt;img src='http://localhost:8888/wp-content/themes/wp-foundation/images/ajax-loader.gif' /&gt;&lt;/div&gt;");
              },
              success: function(data) {
                  $('.team-title').html(data['members'][0]['staff_office'] + ' Office');
                  $.each( data, function(i, item) {
                      $('#team-photo-container').html();
                  });
              }
          });
      });
  </code></pre>
  
  <p>Now when checking the Results, I get the json object like this:</p>
  
  <pre><code>{"members":[{
               "name":"Bruce Willis",
               "staff_title":"Title Here",
               "staff_bio":"Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
               "staff_favorite_apps":"ZULILY, INSTAGRAM, PBA CHALLENGE",
               "staff_office":"City"
              },
              {
               "name":"Bruce Jenner",
               "staff_title":"Title Here",
               "staff_bio":"Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
               "staff_favorite_apps":"ZULILY, INSTAGRAM, PBA CHALLENGE",
               "staff_office":"City"
              }]
             }
  </code></pre>
  
  <p>As you can see if I have 5 people in one office but only 3 in another I need to remove the 5 and replace them with the 3 while either generating the html on the fly or replacing the values.</p>
  
  <p>Any help would be greatly appreciated as I'm stumped at this point.</p>