Есть запрос на AJAX, PHP-скрипт возвращает массив вида:
[{"id":"1","image":"some_image_1.jpg","title":"Some title 1","category":"Some category","date":"2018-05-05 00:30:14","text":"Some text 1","views":"228"},
{"id":"2","image":"some_image_2.png","title":"Some title 2","category":"Some category","date":"2018-05-09 09:15:14","text":"Some text 2","views":"1488"},
{"id":"3","image":"some_image_3.jpg","title":"Some title 3","category":"Some category 3","date":"2018-05-05 00:30:02","text":"Some text 3","views":"122"},
{"id":"4","image":"some_image_4.jpg","title":"Some title 4","category":"Some category 4","date":"2018-05-05 01:26:56","text":"Some text 4 ","views":"1337"}]
$(document).ready(function() {
$('.some_button').click(function() {
if (!$('.some_button').hasClass('activated_button')) {
$.ajax({
type: 'POST',
dataType: "json",
url: 'scripts.php',
data: {
'action': 'get_new_articles',
'type': 'all'
},
success: function(msg) {
console.log(msg)
for (var i = 0; i < msg.length; i++) {
$('<div>', { class: 'card'}).appendTo('#content');
$('<img>', { class: 'card-img-top', src: 'img/' + msg[i]['image'], alt: 'Card image cap'}).appendTo('.card');
$('<div>', { class: 'card-body shadow-lg bg-white rounded'}).appendTo('.card');
$('<h5>', { class: 'card-title'}).appendTo('.card-body');
$('<h6>', { class: 'card-title category'}).appendTo('.card-body');
$('<h6>', { class: 'card-title date'}).appendTo('.card-body');
$('<p>', { class: 'card-text'}).appendTo('.card-body');
$('<a>', { class: 'btn btn-primary', href: '#'}).appendTo('.card-body');
$('.card-title').text(msg[i]['title']);
$('.category').text('Категория: ' + msg[i]['category']);
$('.date').text('Дата: ' + msg[i]['date']);;
$('.card-text').text(msg[i]['text']);
$('.btn').text('Читать');
}
$('.some_button').addClass("activated_button")
},
error: function(msg) {
console.log(typeof(msg))
alert('Error')
}
})
}
})
});
Должно получиться примерно так:
Только таких карточек должно быть 4, с разным контентом из массива, разумеется.
Вопрос: как вывести всё это красиво в html?
UPD: Подправить требуется именно код на JS.
Простой
