Как из JS объекта сделать несколько однотипных html элементов

Question

У меня есть некий JS масив... или объект, простите, если неправильно называю.

let purchases = {
    point1: ["id_1", "Title1", "0.55ml", "750"],
    point2: ["id_2", "Title2", "1ml", "399"],
    point3: ["id_3", "Title3", "1 procedure", "499"]
};

как можно сделать из такого объекта (из каждой строки) сразу несколько Html элементов, например, таких:

<div id="id_1">
    <h6>Title1</h6>
    <p>0.55ml</p>
    <p>$750</p>
</div>
<div id="id_2">
 .............

Нужно, что-то, типа .each или .forEach, я просто, пока ещё, не очень хорошо разбираюсь в этой теме. Буду очень признателен за помощь или за полезные ссылки....или и за то и за другое)))

дополнение: Можно дать, хотя бы, как это всё правильно называетсяя, что-бы по правильным словам я сам мог поискать, а то, из-за того, что не знаю как что назвать, нормально поискать не могу.....Перечитал несколько тем из учебника по js, но полностью подходящего не нашёл(

Answer 1

let purchases = {
    point1: ["id_1", "Title1", "0.55ml", "750"],
    point2: ["id_2", "Title2", "1ml", "399"],
    point3: ["id_3", "Title3", "1 procedure", "499"]
};

var all = '';
for (let key in purchases) {
  all += `<div id="${purchases[key][0]}"><h6>${purchases[key][1]}</h6><p>${purchases[key][2]}</p><p>$${purchases[key][3]}</p></div>`;
}
document.getElementById('container').innerHTML = all;

<div id="container"></div>

Answer 2

let purchases = {
    point1: ['id_1', 'Title1', '0.55ml', '750'],
    point2: ['id_2', 'Title2', '1ml', '399'],
    point3: ['id_3', 'Title3', '1 procedure', '499'],
};


function createHtml(obj) {
    let readyHtml = '';

    for (const key in obj) {

        let [id, title, ml, price] = obj[key];

        readyHtml += `
                    <div id="${id}">
                        <p>Name: ${title}</p>
                        <p>Volume: ${ml}</p>
                        <p>Price: $ ${price}</p>
                    </div>
                `;
    }

    return readyHtml;
}


createHtml(purchases); // результат функции можно уже вставить в шаблон сайта
    ↓ ↓ ↓

// <div id="id_1">
//     <h6>Title1</h6>
//     <p>0.55ml</p>
//     <p>$750</p>
// </div>

// <div id="id_2">
//     <h6>Title2</h6>
//     <p>1ml</p>
//     <p>$399</p>
// </div>

// <div id="id_3">
//     <h6>Title3</h6>
//     <p>1 procedure</p>
//     <p>$499</p>
// </div>

БЛОГ НА HUSL

Как из JS объекта сделать несколько однотипных html элементов

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