Generate markup based on multidimensional array

Question

I have the following multidimensional array:

$pages = array(
  array(
    "icon" => "",
    "subheader" => "Insights",
    "url" => "/insights/",
  ),
  array(
    "icon" => "",
    "subheader" => "Statistics",
    "url" => "/statistics/",
  ),
);

I'm trying to loop through the array and create cards with the above. Here's how I'm looping through the array:

<?php
  $keys = array_keys($pages);
  for($i = 0; $i < count($pages); $i++) {
    foreach($pages[$keys[$i]] as $key => $value) { ?>

      <div class="productCard">
        <div class="productCard__header">
          <!-- url here-->
        </div>
        <div class="productCard__body">
          <!--subheader here -->
          <?php echo $value; ?>
        </div>
      </div>

    <?php }
  }
?>

The above loop renders out (for one item in the array):

<div class="productCard">
  <div class="productCard__header">
    <!-- url here-->
  </div>
  <div class="productCard__body">
    <!--subheader here -->
    Insights
  </div>
</div>

<div class="productCard">
  <div class="productCard__header">
    <!-- url here-->
  </div>
  <div class="productCard__body">
    <!--subheader here -->
    /insights/
  </div>
</div>

As you can see, it's generating a separate productCard for each key.

The output I'm looking to achieve is:

<div class="productCard">
  <div class="productCard__header">
    <!-- url here-->
    /insights/
  </div>
  <div class="productCard__body">
    <!--subheader here -->
    Insights
  </div>
</div>

<div class="productCard">
  <div class="productCard__header">
    <!-- url here-->
    /statistics/
  </div>
  <div class="productCard__body">
    <!--subheader here -->
    Statistics
  </div>
</div>

Where am I going wrong?

$pages isn't an associative array, why are you using array_keys($pages)? — Barmar
– Barmar, Commented Oct 28, 2021 at 0:30

KingWigglett · Accepted Answer · 2021-10-28 00:33:06Z

3

You're looping through the inner data of each element of the array

for() is looping through the main array, then your foreach() is iterating through the individual components.

Since your inner array is an associative array (the keys are defined by you), it means you can access them directly using [''] notation.

There are many different ways to do this, but I would suggest a single loop and then pull out your individual values:

Try this:

<?php
foreach($pages as $key => $value) { ?>

  <div class="productCard">
    <div class="productCard__header">
      <!-- url here-->
<?php echo $value['url']; ?>
    </div>
    <div class="productCard__body">
      <!--subheader here -->
      <?php echo $value['subheader']; ?>
    </div>
  </div>

<?php
}
?>

answered Oct 28, 2021 at 0:33

KingWigglett

1835 bronze badges

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

Collectives™ on Stack Overflow

Generate markup based on multidimensional array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related