Stack Overflow на русском Asked on July 22, 2020
Есть json файл
{
"items": [
{
"name": "10 причин приехать отдыхать в Бурятию на отпуск",
"description": "Рассказываем о главных особенностях Бурятии",
"date": "12 мая 2020 года",
"images": "images/news/culture/1.png"
},
{
"name": "10 причин приехать отдыхать в Бурятию на отпуск",
"description": "Рассказываем о главных особенностях Бурятии",
"date": "12 мая 2020 года",
"images": "images/news/culture/2.png"
},
{
"name": "10 причин приехать отдыхать в Бурятию на отпуск",
"description": "Рассказываем о главных особенностях Бурятии",
"date": "12 мая 2020 года",
"images": "images/news/culture/2.png"
},
{
"name": "10 причин приехать отдыхать в Бурятию на отпуск",
"description": "Рассказываем о главных особенностях Бурятии",
"date": "12 мая 2020 года",
"images": "images/news/culture/2.png"
},
{
"name": "10 причин приехать отдыхать в Бурятию на отпуск",
"description": "Рассказываем о главных особенностях Бурятии",
"date": "12 мая 2020 года",
"images": "images/news/culture/2.png"
},
{
"name": "10 причин приехать отдыхать в Бурятию на отпуск",
"description": "Рассказываем о главных особенностях Бурятии",
"date": "12 мая 2020 года",
"images": "images/news/culture/2.png"
},
{
"name": "10 причин приехать отдыхать в Бурятию на отпуск",
"description": "Рассказываем о главных особенностях Бурятии",
"date": "12 мая 2020 года",
"images": "images/news/culture/2.png"
},
{
"name": "10 причин приехать отдыхать в Бурятию на отпуск",
"description": "Рассказываем о главных особенностях Бурятии",
"date": "12 мая 2020 года",
"images": "images/news/culture/2.png"
}
]
}
Есть скрипт:
(function($){
var defaults = {
'url': null, // The url you are fetching the results.
'autoload': true, // Change this to false if you want to load manually, default true.
'data': {
// These are the variables you can pass to the request, for example: which page you are
'page': 1, // Which page at the firsttime
'size': 10, // Number of pages
},
'before': function(){
// Before load function, you can display a preloader div
$(this.loading).fadeIn();
},
'after': function(elementsLoaded){
// After loading content, you can use this function to animate your new elements
$(this.loading).fadeOut();
$(elementsLoaded).fadeInWithDelay();
},
'scroller': $(window), // Who gonna scroll? default is the full window
'heightOffset': 20, // It gonna request when scroll is 10 pixels before the page ends
'loading': '#loading', // ID of loading prompt.
'loadingText': 'Wait a moment... it's loading!', // Text of loading prompt.
'loadingNomoreText': 'No more.', // No more of loading prompt.
'manuallyText': 'click to loading more.',
};
$.fn.scrollPagination = function(options) {
var opts = $.extend(defaults, options);
var target = opts.scroller;
return this.each(function() {
$.fn.scrollPagination.init($(this), opts);
});
};
$.fn.stopScrollPagination = function(obj=null, opts=null){
if(obj == null){
return this.each(function() {
$(this).attr('scrollPagination', 'disabled');
});
}else{
$(opts.loading).text(opts.loadingNomoreText).fadeIn();
$(obj).attr('scrollPagination', 'disabled');
}
};
$.fn.scrollPagination.loadContent = function(obj, opts){
var target = opts.scroller;
// do before
if (opts.before != null){
opts.before();
}
$(obj).children().attr('rel', 'loaded');
$.ajax({
type: 'POST',
url: opts.url,
data: opts.data,
dataType: 'json',
success: function(data){
var html = "";
if(data.content != null){
$(opts.loading).text(opts.loadingText);
$.each(data.content,function(index, value){
html += "<div class='item'>";
html += "<a href='' class='image video-culture'>";
html += "<img src='${element[i].images}'>";
html += "</a>";
html += "<a class='videos__play'></a>";
html += "<div class='info'>";
html += "<a href='' class='title'>${element[i].name}</a>";
html += "<div class='des'>${element[i].description}</div>";
html += "<div class='date'>${element[i].date}</div>";
html += "</div>";
html += "</div>";
dataCount = parseInt(index) + 1;
});
$(obj).append(html);
if(dataCount < opts.data.size){
opts.data.page++;
}else{
$.fn.stopScrollPagination(obj, opts);
}
}
var objectsRendered = $(obj).children('[rel!=loaded]');
// do after
if (opts.after != null){
opts.after(objectsRendered);
}
}
});
};
$.fn.scrollPagination.init = function(obj, opts){
var target = opts.scroller;
$(obj).attr('scrollPagination', 'enabled');
if($(obj).children().length === 0){
$.fn.scrollPagination.loadContent(obj, opts);
}
if(opts.autoload === true){
$(target).scroll(function(event){
if($(obj).attr('scrollPagination') == 'enabled'){
var mayLoadContent = (Math.ceil($(target).scrollTop()) + opts.heightOffset) >= ($(document).height() - $(target).height());
if(mayLoadContent){
$.fn.scrollPagination.loadContent(obj, opts);
}
}else{
event.stopPropagation(obj, opts);
}
});
// $.fn.scrollPagination.loadContent(obj, opts);
}else{
opts.loadingText = opts.manuallyText;
$(opts.loading).text(opts.loadingText).fadeIn().on('click', function(event){
if($(obj).attr('scrollPagination') == 'enabled'){
$.fn.scrollPagination.loadContent(obj, opts);
}else{
event.stopPropagation(obj, opts);
}
});
// $.fn.scrollPagination.loadContent(obj, opts);
}
};
// code for fade in element by element
$.fn.fadeInWithDelay = function(){
var delay = 0;
return this.each(function(){
$(this).delay(delay).animate({opacity:1}, 200);
delay += 100;
});
};
})(jQuery);
Как правильно, вывести данные, сейчас почему-то не выводит данные из json, а выводит то, что написано в тегах
Думаю проблема не тех кавычек использованных в скрипте. Они же шаблонные строки.
`${element[i].images}`
Не путайте строки "" с шаблонными строками ``
Answered by Aziz Umarov on July 22, 2020
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP