Создать HTML UL, используя шаблон для каждого HTML LI

@Ewelai · Регистрация: 13.12.2018

Студворк — интернет-сервис помощи студентам

Нужно написать функцию, которая создает HTML UL, используя шаблон для каждого HTML LI. Источник списка должен быть массивом элементов. Замените все заполнители, помеченные как - {...}- ' значением соответствующего свойства объекта.

HTML5
1
2
3
    <div data-type="template" id="list-item">
        <strong>-{name}-</strong> <span>-{age}-</span>
    </div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
var people = [
            { name: "Шапокляк", age: 55 },
            { name: "Чебурашка", age: 17 },
            { name: "Крыска-Лариска", age: 18 },
            { name: "Крокодильчик", age: 26 },
            { name: "Турист- завтрак крокодильчика", age: 32 },
        ]
        var divPeople = document.getElementById("list-item");
        var template = divPeople.innerHTML;
        var peopleList = generateHtmlList(people, template);
        divPeople.innerHTML = peopleList;
    //peopleList="<ul><li><strong>Шапокляк</strong> <span>55</span></li><li>...</li>...</ul>"

На выходе должно получится, как на скрине ниже

@amr-now · 08.01.2019, 08:41

Здравствуйте. Скрин не соответствует шаблону. Одного пробела не хватает.

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <div data-type="template" id="list-item">
        <strong>-{name}-</strong> <span>-{age}-</span>
    </div>
    <script>
        let people = [
            { name: "Шапокляк", age: 55 },
            { name: "Чебурашка", age: 17 },
            { name: "Крыска-Лариска", age: 18 },
            { name: "Крокодильчик", age: 26 },
            { name: "Турист- завтрак крокодильчика", age: 32 },
        ]
        let divPeople = document.getElementById("list-item");
        let template = divPeople.innerHTML;
        let peopleList = generateHtmlList(people, template);
        divPeople.innerHTML = peopleList;
 
        function generateHtmlList(array, template) {
            return "<ul><li>" + array.map(e => template.replace("{name}", e.name).replace("{age}", e.age)).join`</li><li>` + "</li></ul>";
        }
    </script>
</body>
</html>

@Ewelai · 08.01.2019, 11:13 **[ТС]**

Спасибо огромное!

Новые блоги и статьи Все статьи Все блоги /
Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .	Функция заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .
Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем	10 пpимет, которые всегда сбываются Maks 31.03.2026 1. Чтобы, наконец, пришла маршрутка, надо закурить. Если сигарета последняя, маршрутка придет еще до второй затяжки даже вопреки расписанию. 2. Нaдоели зима и снег? Не надо переезжать. Достаточно. . .	Перемещение выделенных строк ТЧ из одного документа в другой Maks 31.03.2026 Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .

@Ewelai 5 / 5 / 0 Регистрация: 13.12.2018 Сообщений: 18
	08.01.2019, 11:13 [ТС]
	Спасибо огромное! 0

Создать HTML UL, используя шаблон для каждого HTML LI

Решение