TransWikia.com

Как правильно вывести json?

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, а выводит то, что написано в тегах

One Answer

Думаю проблема не тех кавычек использованных в скрипте. Они же шаблонные строки.

`${element[i].images}`

Не путайте строки "" с шаблонными строками ``

Answered by Aziz Umarov on July 22, 2020

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP