How to Create HTML List from Array in PHP?

Given an array containing some items, the task is to create an HTML list from an array in PHP. An HTML list is a collection of items enclosed within <ul> (unordered list) or <ol> (ordered list) tags. Each item in the list is enclosed within <li> (list item) tags. This article explores different approaches to converting an array into an HTML list.

Using foreach Loop

The foreach loop is a basic method to iterate over an array and generate the corresponding HTML list items.

• The createList function takes an array as an argument.
• It initializes the $html string with the opening <ul> tag.
• The foreach loop iterates over each element in the array, appending each item as an <li> element to the $html string.
• The function closes the list with the </ul> tag and returns the resulting HTML string.

Example: This example shows the creation of HTML list from an array using foreach loop.

<?php
function createList($arr)
{
    $html = '<ul>';
    foreach ($arr as $item) {
    $html .= '<li>' . htmlspecialchars($item) . '</li>';
    }
    $html .= '</ul>';
    return $html;
}
// Driver code
$arr = ['HTML', 'CSS', 'JavaScript', 'PHP'];
echo createList($arr);
?>

<ul><li>HTML</li><li>CSS</li><li>JavaScript</li><li>PHP</li></ul>

Using array_map() and implode() Function

Using array_map() and implode() function provides a functional approach to generate the HTML list.

• The createList function takes an array as an argument.
• It uses array_map() to apply a callback function to each element of the array, wrapping each item in <li> tags.
• The resulting array of list items is then joined into a single string using implode.
• The function wraps the list items in <ul> tags and returns the resulting HTML string.

Example: This example shows the creation of HTML list from an array using array_map() and implode() Function.

<?php

function createList($arr) {
    $listItems = array_map(function($item) {
        return '<li>' . htmlspecialchars($item) . '</li>';
    }, $arr);
    return '<ol>' . implode('', $listItems) . '</ol>';
}

// Driver code
$arr = ['HTML', 'CSS', 'JavaScript', 'PHP'];
echo createList($arr);

?>

<ol><li>HTML</li><li>CSS</li><li>JavaScript</li><li>PHP</li></ol>

Using array_reduce() Function

The array_reduce() can be used to build the HTML list by accumulating the result in a single string.

• The createList function takes an array as an argument.
• It uses array_reduce() function to iterate over the array and accumulate the list items into the $html string.
• The initial value for $html is set to the opening <ul> tag.
• The callback function appends each item as an <li> element to the accumulating string.
• The function closes the list with the </ul> tag and returns the resulting HTML string.

Example: This example shows the creation of HTML list from an array using array_reduce() Function.

<?php

function createList($arr) {
    $html = array_reduce($arr, function($carry, $item) {
        return $carry . '<li>' . htmlspecialchars($item) . '</li>';
    }, '<ul>');
    return $html . '</ul>';
}

// Driver code
$arr = ['HTML', 'CSS', 'JavaScript', 'PHP'];
echo createList($arr);

?>

<ul><li>HTML</li><li>CSS</li><li>JavaScript</li><li>PHP</li></ul>