Display array data in HTML elements using PHP
Updated: 08-Aug-2024 / Tags: PHP Lang Reference / Views: 216 - Author: George
Introduction
Hello everyone, let's see in this article how we can use the foreach() PHP built-in function to loop through arrays and display their data inside HTML elements.
We are going to look at two examples. In the first example we will loop through an indexed array, and in the second example we will loop through a multidimensional associative array.
The index file
Usually when we display dynamically html generated data we do that inside html code. So here we have a basic web page structure where we are going to write our php examples.
We are going to name the file index.php.
To write PHP code in an HTML file the HTML file must have a .php extension. This means our index file is NOT named index.html, but index.php.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Loop through an array and display html code</title>
</head>
<body>
</body>
</html>
Indexed array
Lets see our first example where we have an indexed array named $names.
<body>
<?php $names = array('Dennis','James','Axel','Tony'); ?>
// Using the foreach function to loop through the $name array.
<?php foreach($names as $name):?>
<p>My name is <?php echo $name ?></p>
<?php endforeach; ?>
</body>
- In line 10 we have the $names array containing the names of four users. In order to write php code inside HTML code we have to use the opening <?php and the closing ?> php tags. And the php code goes between those tags. You will hear that many programmers are referring to it as "escaping html code to write php".
-
In line 13 we use the foreach function. With the foreach function we can iterate
through arrays and objects.
The first argument $names is the array that we want to loop trough, and as a second argument $name we insert a variable (of any name we like), which in every iteration will hold the current value.<?php foreach($names as $name):?>
1st iteration $name = "Dennis", 2nd iteration $name = "James" and so on...
Notice the opening and closing php tags and the colon. -
In line 14 we are going to display every name inside a paragraph element. We are now in the loop's body.
In here we can write regular HTML.
The function will iterate through the array as long as it finds values.<p>My name is <?php echo $name ?></p> -
And in line 14 we are closing the foreach loop by using the endforeach keyword.
<?php endforeach; ?> -
This will output something like
My name is Dennis My name is James My name is Axel My name is Tony
Multidimensional array
In this example we are going to loop through a two dimensional array, that means that we have an array that holds other arrays. In our case here we have an array that holds associative arrays. Every associative array is defining a person and holds the name, the age, and the profession of that person.
<body>
<?php
$people = array(
["name" =>"Denis", "age" =>"25", "profession" => "Teacher"],
["name" =>"James", "age" =>"35", "profession" => "Pilot"],
["name" =>"Axel", "age" =>"28", "profession" => "Race driver"],
["name" =>"Tony", "age" =>"32", "profession" => "Actor"],
);
?>
<?php foreach($people as $person):?>
<p>
My name is <?php echo $person["name"]; ?>,
I am <?php echo $person["age"] ?> years old,
and i am a <?php echo $person["profession"] ?>.
</p>
<?php endforeach; ?>
- To display the values of a multidimensional array we use again the foreach function to loop through the $people array, and grab every associative array in the $person variable. This time the $person variable every time the loop iterates will hold an array.
- So, to access the values, we have to address the keys like this: $person["age"] will give us the age value, $person["name"] will give us the name, and so on...
This will output something like
My name is Denis, I am 25 years old, and i am a Teacher. My name is James, I am 35 years old, and i am a Pilot. My name is Axel, I am 28 years old, and i am a Race driver. My name is Tony, I am 32 years old, and i am a Actor.
Summary
In this article, we saw how to use the PHP foreach function to loop through an indexed array and a multidimensional array, and display their data inside HTML tags.
Thanks for reading, i hope you find the article helpful.
Buy me a coffee
Created By Digitalfox
Responsive navigation with working login system using PHP Mysql and Ajax
Responsive navigation menu that integrates a secure login and register system, with a forgot password action, and a contact form.
The whole system is animated in slide-in sidebars and shows up on the right side of the web-design.
Comment section
You can leave a comment, it will help me a lot.
Or you can just say hi. 😉