Order Posts by Custom Field Value and display the value once

Question

i want to display wordpress posts by a custom field value. That's not that hard. I've got that already:

<?php

// args
$args = array(
  'post_type'   => 'safari',
  'meta_key'  => 'city',
  'orderby'   => 'meta_value',
  'order'     => 'ASC'
);

$safari_query= new WP_Query( $args ); ?>
    <?php if ($safari_query->have_posts()) : ?>

        <?php while ($safari_query->have_posts()) : $safari_query->the_post(); ?>

        // My code here

        <?php endwhile; ?>
        <?php wp_pagenavi(array('before' => '', 'after' => '', 'options' => array(), 'query' => $safari_query)); ?>
    <?php endif; ?>

But what i need now is, that the custom field value is displayed ONCE on top of the related posts. Something like this:

City 1:

• Hotel 1
• Hotel 2
• Hotel 3

City 2:

• Hotel 4
• Hotel 5

City 3:

• Hotel 6

and so on.

Any idea how i can add that to my existing code?

Kind regards

Edit:

With Chris' help i got it so far but it displays the city (now location) everytime:

<?php

// args
$args = array(
  'post_type'   => 'resort',
  'meta_key'  => 'wpcf-location',
  'orderby'   => 'meta_value',
  'order'     => 'ASC'
);

$safari_query= new WP_Query( $args ); ?>
<?php if ($safari_query->have_posts()) : ?>

    <?php while ($safari_query->have_posts()) : $safari_query->the_post(); ?>


        <?php
        $location = get_post_meta($post->ID, 'wpcf-location', true);
        $resort = the_title();
        $previousResort = "";

        if($location !== $previousResort ) {
            //output the location name and start a list, if necessary close the prvevious list
            if($current_row !==1) {
                echo "</ul>";
            }
            echo "$location <br> <ul><li>$resort</li>";

         } else {
             // not a changed location, just output the resort
             echo "<li>$resort</li>";
         }
         //finally, if this is the last row, close the list
         if($current_row == $row_count) {
             echo "</ul>";
         }
         ?>

    <?php endwhile; ?>
<?php endif; ?>

Final Edit:

Got it working with the help of Chris! Thanks!

 <?php

  // args
  $args = array(
    'post_type'   => 'resort',
    'meta_key'  => 'wpcf-location',
    'orderby'   => 'meta_value',
    'order'     => 'ASC'
  );

  $previousLocation = "";

  $safari_query= new WP_Query( $args ); ?>
      <?php if ($safari_query->have_posts()) : ?>

          <?php while ($safari_query->have_posts()) : $safari_query->the_post(); ?>


              <?php
              $location = get_post_meta($post->ID, 'wpcf-location', true);

              if($location !== $previousLocation ) {
                  //output the location name and the first resort.

               } else {
                   // not a changed location, just output the resort

               }

              $previousLocation = $location; ?>
          <?php endwhile; ?>
      <?php endif; ?>

Answer 1

Here is a basic pseudocode example of how to accomplish this. Note: the variables are made up since I'm not sure what your variable values are.

//set up a var to track the city from the previous loop
$previousCity = "";       
<?php while ($safari_query->have_posts()) : $safari_query->the_post(); ?>
    if($city !== $previousCity ) {
        //output the city name and start a list, if necessary close the prvevious list
        if($current_row !===1) {
            echo "</ul>";
        }
        echo "$city <br> <ul><li>$Hotel</li>";
     } else {
         // not a changed city, just output the hotel
         echo "<li>$Hotel</li>"; 
     }
     //finally, if this is the last row, close the list
     if($current_row == $row_count) {
         echo "</ul>";
     }
     $previousCity = $city;
<?php endwhile; ?>

Edit:

Left out an important part! Before the end of your loop, you have to set the location to previousLocation or it will never match:

    $previousLocation = $location;
<?php endwhile; ?>