Как можно отрендерить массив с данными?

Question

[Neuro]

Добрый вечер, может кто то знает как решить данную проблему?
У меня есть массив такого типа

spoiler

const template = [
        {
            title: "Title name 1",
            url: "test.com"
        },
        {
            title: "Title name 2",
            url: "test.com"
        },
        {
            title: "Title name 3",
            url: "test.com"
        },
        {
            title: "Title name 4",
            url: "test.com"
        },
        {
            title: "Title name 5",
            url: "test.com"
        },
        {
            title: "Title name 6",
            url: "test.com"
        }
    ]

И с помощью этого массива мне необходимо отрендерить три блока по 2 элемента в каждом, что бы получилось как на картинке, можно ли это как то реализовать?

Comments

[alex]

можно ли это как то реализовать?

можно

Answer 1

[Владимир Проскурин]

Ну, вариантов миллион и одна тележка. Можно просто собрать строку, и потом вывести ее в нужный элемент через innerHTML. Можно в цикле создавать нужные html элементы, и добавлять их в нужный блок. Можно воспользоваться шаблонизатором, отправить в него данные и шаблон с версткой. Можно воспользоваться фреймворком (Vue, React etc).
А конкретно про то, чтобы по два элемента, ну, в цикле делаете шаг в 2 элемента, и пихаете в нужный блок.
UPD: о, еще для того, чтобы выводить по два элемента, можете воспользоваться css свойством columns, а данные выводить обычным способом.
Пример через HTML элементы https://jsfiddle.net/Vlad_IT/uz1td5Lh/

Comments

[Neuro]

ого, спасибо, но допустим я использую шаблонизатор ejs
И рендерю его через цикл for

for(i=0; template.length >= i; i++) {
<div>
     <div>template[i].title</div>
      <div>template[i].utl</div>
</div>
}

Можно ли как то в этом случае разбить на 3 блока?

[Владимир Проскурин]

Neuro, ваш код не очень похож на ejs (я с ejs плохо знаком, но сужу по примерам из документации),
должно быть так

<% for(var i=0; i < template.length; i+=2) { %>
<div>
     <div><%=template[i].title%></div>
      <% if (template[i+1]) { %>
            <div>
                  <%=template[i+1].title %>
             </div>
       <% } %>
</div>
<% } %>

Тут я вывожу только заголовок, но я думаю, вы разберетесь.