Как заполнить HTML данными из jquery (несколько вложенных div)
Я хочу заполнить элементы внутри класса info-wrapper с помощью JQuery. Данные, которые необходимо заполнить, находятся внутри переменной data в JQuery. Я не могу использовать $('#id').append ("div") нравится этот синтаксис, потому что я хочу вложить несколько div друг в друга и поплюровать .карта-оболочка и ее дочерние элементы для каждого элемента данных.
В jQuery
$.ajax({
method: 'GET',
url: 'getUser/admin',
dataType: 'json',
success: function (data) {
console.log(typeof(data));
data = Object.entries(data);
for(var i = 0;i<data.length;i++)
{
}
},
error: function () {
}
})
Шаблон Лезвия
@extends('layouts.app')
@section('admin-content')
<div class="container">
<div class="row" id="inject">
<div class="col-md-6 col-sm-12">
<div class="card-wrapper">
<div class="info-wrapper">
<h2 id="name"></h2>
<h6 id="email"></h6>
<hr/>
<h6 id="department"></h6>
<h6 is="sem"></h6>
</div>
<div class="button-wrapper">
<button class="btn btn-danger" type="submit">Delete Account</button>
<button class="btn btn-secondary" type="submit">Block Account</button>
</div>
</div>
</div>
</div>
</div>
@endsection
У вопроса есть решение - Посмотреть?
Ответы - Как заполнить HTML данными из jquery (несколько вложенных div) / How to Populate HTML with data from jquery (multiple nested div)
Является ответом!
24.12.2019 07:26:16
Поскольку info-wrapper - это всего лишь один элемент, вы можете вместо этого заполнить элементы внутри div с помощью inject id, вы можете внести изменения в свой js для динамического генерирования элементов, я надеюсь, что это поможет.
$.ajax({
method: 'GET',
url: 'getUser/admin',
dataType: 'json',
success: function (data) {
console.log(typeof(data));
data = Object.entries(data);
let html = '';
for(var i = 0;i<data.length;i++)
{
html += `
<div class="card-wrapper">
<div class="info-wrapper">
<h2 id="name">${data[i].name}</h2>
<h6 id="email">${data[i].email}</h6>
<hr/>
<h6 id="department">${data[i].department}</h6>
<h6 is="sem"><${data[i].sem}/h6>
</div>
<div class="button-wrapper">
<button class="btn btn-danger" type="submit">Delete Account</button>
<button class="btn btn-secondary" type="submit">Block Account</button>
</div>
</div>
`;
}
html = `<div class="col-md-6 col-sm-12">${html}</div>`
$('#inject').html(html);
},
error: function () {
}
})