Повторение html блока при обработке JSON

237
16 декабря 2019, 10:20

Получаю данные о пользователях в JSON.

Задача обработать и выводить данные каждого пользователя в отдельном html блоке по порядку.

В данный момент вывод данных реализован примерным образом 

$('.text').append('<div class='user_name'><span>' + user.name+ '</span><div>');

Т.к. подобным способом нужно будет вставлять приличное количество тегов html, решение не самое удачное.

Если ли способ написания шаблона html блока и при каждом новом пользователе вставлять его и заполнять нужными данными?

Answer 1

Можно так:

// сразу создаем шаблон 
var span = document.createElement( 'span' ); 
var div = document.createElement( 'div' ); 
div.className = 'user_name'; 
div.appendChild( span ); 
 
// глубоко клонируем элемент и устанавливаем имя - это быстрее чем создание новых элементов 
function item ( name ) { 
    var n = div.cloneNode( true ); 
    n.firstElementChild.textContent = name; 
    return n; 
} 
 
// пользователи 
var user = [ 'Вася', 'Петя', 'Маша' ]; 
 
var list = document.getElementById( 'list' ); 
user.forEach( function( i ){ 
    list.appendChild( item ( i ) ); 
});
<div id="list"></div>

Answer 2

Как самый тривиальный вариант:

function generateUserHtmlBlock(user) {
  return "<div class='user_name'><span>" + user.name + "</span><div>";
}
$.ajax({
  ...,
  success: function(users) {
    for (var i = 0; i < users.length; i++) {
      $('.text').append(generateUserHtmlBlock(users[i]));
    }
  }
})

Советую посмотреть в сторону компонентного подхода.

READ ALSO
Изменить Orientation установленную в manifest
javascript

Изменить Orientation установленную в manifest

Есть ли какой-нибудь способ изменить ориентацию экрана (включить её), если в manifestjson жестко прописана например портретная ориентация

 231
как в js получить ссылку с помощью data-url=&ldquo;&rdquo;
javascript

как в js получить ссылку с помощью data-url=“”

как в js получить ссылку с помощью data-url=""

 205
Метод не очищает функцию
javascript

Метод не очищает функцию

 210
Как не дать элементу установленному на картинки выйти за его рамки
javascript

Как не дать элементу установленному на картинки выйти за его рамки

Создать HTML-страницу с футбольным полем, которое занимает всю ширину и высоту экрана, и мячом размером 100px на 100pxСделать так, чтобы при щелчке...

 190