Объединить массивы и вывести в HTML

Question

есть 2 массива с переменными, нужно их объединить, создать из них элементы button с классом btn-menu, data элементом category (с переменной из массива) и текстом из массива.

let category = [Пицца ?, Роллы ?, Сеты ?, Горячие блюда ?, Салаты ?, Бизнес-ланч ?, Супы ?, Закуски ?, Десерты ?, Хлеб ?, Детское меню ?, Напитки ?, Гарниры ?];
let slug_id = [pizza, rolls, sets, hot-dish, salads, business-lunch, soups, snacks, desserts, bread, child-menu, drinks, garnishes];

Порядок из первого и второго массива соотвествует содержимому, то есть Пицца ?(0) и pizza(0) Нужно все эти элементы вывести в HTML объект nav с классом container

Должно получиться горизонтальное меню с кнопками:

    <nav class="container">
        <button class="btn-menu ripple-btn" category="pizza">Пицца ?</button>
        <button class="btn-menu ripple-btn" category="rolls">Роллы ?</button>
        <button class="btn-menu ripple-btn" category="sets">Сеты ?</button>
        <button class="btn-menu ripple-btn" category="hot-dish">Горячие блюда ?</button>
        <button class="btn-menu ripple-btn" category="salads">Салаты ?</button>
        <button class="btn-menu ripple-btn" category="business-lunch">Бизнес-ланч ?</button>
        <button class="btn-menu ripple-btn" category="soups">Супы ?</button>
        <button class="btn-menu ripple-btn" category="snacks">Закуски ?</button>
        <button class="btn-menu ripple-btn" category="desserts">Десерты ?</button>
        <button class="btn-menu ripple-btn" category="bread">Хлеб ?</button>
        <button class="btn-menu ripple-btn" category="child-menu">Детское меню ?</button>
        <button class="btn-menu ripple-btn" category="drinks">Напитки ?</button>
        <button class="btn-menu ripple-btn" category="garnishes">Гарниры ?</button>
    </nav>

Помогите пожалуйста решить задачу.

Answer 1

$let_category = ['Пицца', 'Роллы',  'Сеты', 'Горячие блюда', 'Салаты', 'Бизнес-ланч', 'Супы', 'Закуски', 'Десерты', 'Хлеб', 'Детское меню', 'Напитки', 'Гарниры',];
$let_slug_id = ['pizza', 'rolls', 'sets', 'hot-dish', 'salads', 'business-lunch', 'soups', 'snacks', 'desserts', 'bread', 'child-menu', 'drinks', 'garnishes',];

echo count($let_category) . ' ' . count($let_slug_id);

$nav = '<nav class="container">';
for ($i = 0; $i < count($let_category); $i++) {
    $nav .= "<button class=\"btn-menu ripple-btn\" category=\"{$let_slug_id[$i]}\">{$let_category[$i]}</button>" . PHP_EOL;
}

$nav .= '</nav>';


echo $nav;

<nav class="container"><button class="btn-menu ripple-btn" category="pizza">Пицца</button>
    <button class="btn-menu ripple-btn" category="rolls">Роллы</button>
    <button class="btn-menu ripple-btn" category="sets">Сеты</button>
    <button class="btn-menu ripple-btn" category="hot-dish">Горячие блюда</button>
    <button class="btn-menu ripple-btn" category="salads">Салаты</button>
    <button class="btn-menu ripple-btn" category="business-lunch">Бизнес-ланч</button>
    <button class="btn-menu ripple-btn" category="soups">Супы</button>
    <button class="btn-menu ripple-btn" category="snacks">Закуски</button>
    <button class="btn-menu ripple-btn" category="desserts">Десерты</button>
    <button class="btn-menu ripple-btn" category="bread">Хлеб</button>
    <button class="btn-menu ripple-btn" category="child-menu">Детское меню</button>
    <button class="btn-menu ripple-btn" category="drinks">Напитки</button>
    <button class="btn-menu ripple-btn" category="garnishes">Гарниры</button>
</nav>

тоже самое и на js и все

БЛОГ НА HUSL

Объединить массивы и вывести в HTML

Ответы (1 шт):