从JSON获取数据，例如使用javascript和jquery加载更多内容 [英] Fetch data from json like load more using javascript and jquery

问题描述

我对javascript不太了解，并且正在练习以提高自己的技能.

Hi I am noob at javascript and doing practice for improving my skills.

我制作了一个示例项目，并使用getJSON从json提取了数据.

I made one sample project and fetched data from json using getJSON.

它工作正常，但是我想要的是首先显示第三个索引数据，然后单击loadMore按钮.

It worked fine but what I want is to show 3rd index data first and rest onclick of loadMore button.

像第一个一样，我将在JSON中填充"3个列表项"，之后我需要每2 li在负载中填充更多单击...这是我的json数组

like First I will have "3 list item" populated with json after that I would need every 2 li to get populated on loadMore click...here is my json array

[
{
"imagepath" : "sample url",
"heading" : "sample heading",
"details" : "sample details"
},
{
"imagepath" : "sample url",
"heading" : "sample heading",
"details" : "sample details"
},
{
"imagepath" : "sample url",
"heading" : "sample heading",
"details" : "sample details"
},
{
"imagepath" : "sample url",
"heading" : "sample heading",
"details" : "sample details"
},
{
"imagepath" : "sample url",
"heading" : "sample heading",
"details" : "sample details"
},
{
"imagepath" : "sample url",
"heading" : "sample heading",
"details" : "sample details"
},
{
"imagepath" : "sample url",
"heading" : "sample heading",
"details" : "sample details"
},
]

这是示例代码

$(document).ready(function(){
                $('#fetchit').click(function(){
                $.ajax({
                    url:"one.json",
                    cache: false,
                    dataType : "json",
                    success :function(){
                        //alert('bf c')
                        $('.hold').empty();
                        $.getJSON("one.json",function(data){
                            $.each(data ,function(i,value){
                                var list ="<li>" + "<img src'" + value.imagepath + "' alt=''/>" + "<span>" + value.heading + "</span>" + "<span>" + value.details + "</span>" 
                            $('.hold').append(list)
                            })
                        })
                    },
                    error:function(xhr,status,error){
                        alert(xhr.status)
                    }
                })
            })
        });

此代码一键获取整个json，但我想解析它或在单击时将其部分加载. 请使用ajax getJSON或javascript帮助我.我无法弄清楚loadMore的逻辑，我知道我们必须通过一些计数器来完成此操作...

this code is fetching whole json at one click but i want to parse it or load it in parts on click. please help me in this using ajax getJSON or javascript. I am unable to make the logic of loadMore, I know we have to do this by some counter...

推荐答案

试试看:- http://jsfiddle.net/adiioo7/8erwrha2/

JS:-

var json = [{
    "imagepath": "sample url",
        "heading": "sample heading",
        "details": "sample details"
}, {
    "imagepath": "sample url",
        "heading": "sample heading",
        "details": "sample details"
}, {
    "imagepath": "sample url",
        "heading": "sample heading",
        "details": "sample details"
}, {
    "imagepath": "sample url",
        "heading": "sample heading",
        "details": "sample details"
}, {
    "imagepath": "sample url",
        "heading": "sample heading",
        "details": "sample details"
}, {
    "imagepath": "sample url",
        "heading": "sample heading",
        "details": "sample details"
}, {
    "imagepath": "sample url",
        "heading": "sample heading",
        "details": "sample details"
}];

jQuery(function ($) {
    $.each(json, function (i, value) {
        var list = "<li class='hidden' >" + "<img src'" + value.imagepath + "' alt=''/>" + "<span>" + value.heading + "</span>" + "<span>" + value.details + "</span>"
        $('.hold').append(list);
    });

    function loadMore(){
        $(".hold .hidden").slice(0,2).removeClass("hidden");
    }

    loadMore();

    $("#btnLoadMore").on("click",loadMore);        

});

HTML:-

<div class="hold"></div>
<input type="button" id="btnLoadMore" value="Load More"/>

CSS:-

.hidden {
    display:none;
}

这篇关于从JSON获取数据，例如使用javascript和jquery加载更多内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！