Return x items of an array at a time

Question

Good day to all.

I have this little jquery code.

$(document).ready(function() {
    $("#mains").one("click", function() {
        var pmmain = ["aaa", "bbb", "ccc", "ddd", "eee", "fff", "ggg", "hhh", "iii", "jjj", "kkk", "lll", "mmm", "nnn", "ooo", "ppp"];
        var a = 0;
        var b = 0;
        for (a = 0; a < pmmain.length; a++) {
            $("#pm-page-main").append("<div class=\"main-box\"><div class=\"title-box\"><span         class=\"reg-wht-bold\">" + pmmain[a] + "</span></div><BR><BR><img src=\"imgs\\" + pmmain[a] + ".png\"></div>");
        }
    });
});

The code is working but what I really want to do is to return let's say 4 items at a time. I still want to do a lot of things with it but I guess asking it piece by piece would make me understand it better than asking it all in one go.

Update:

I don't know if anyone is interested but this is what I end up with

    $(document) .ready(function(){
    var a;
    var b;
    var c;
    var d;
    var pmmain =["Citrix", "Coach", "Disney", "Edison", "Eversource", "Fedex", "General Dynamics", "Hertz", "Kimco", "Nabors", "Starbucks", "Timewarner", "TW Telecom", "Weatherford", "Western Union", "Zoetis"];
    $("#mains") .one("click",function(){
    c=0;
    d=c+4;
    a=4;
    b=0;

    for (a=c; a<d; a++){
    $("#pm-page-main") .append("<div class=\"main-box\"><div class=\"title-box\"><span class=\"reg-wht-bold\">"+pmmain[a]+"</span></div><BR><BR><img src=\"imgs\\"+pmmain[a]+".png\"></div>");
    }
    });
       $("#next-four").click(function() {

                 b = a
                 d = b +4;
    $("#pm-page-main") .html(""); 
        for (b=a; b < d; b++) {
                $("#pm-page-main") .append("<div class=\"main-box\"><div class=\"title-box\"><span         class=\"reg-wht-bold\">" + pmmain[b] + "</span></div><BR><BR><img src=\"imgs\\" + pmmain[b] + ".png\"></div>").hide().show();;
        }
            a = a+4;
    });
    });

I decided to go with this because it gives me the option to clear the div and put in the next four.

I guess the next step for me is to figure out how to stop it from going when the array ends.

Thanks for all the help!

Possible duplicate of : http://stackoverflow.com/questions/8495687/split-array-into-chunks — juvian, Aug 31 '15 at 17:28
thanks about that. but i still have follow up questions after this. — Selim, Aug 31 '15 at 17:32

PeterKA · Answer 1 · 2015-09-01T15:07:22.203

The following code would give you four each time you click #mains. This means that .one() must be changed to .on(). The loop start and limit and array are tracked and saved as data-attributes.

$(document).ready(function() {
    $("#mains").data({a:0,b:0,pmmain:["aaa", "bbb", "ccc", "ddd", "eee", "fff", "ggg", "hhh", "iii", "jjj", "kkk", "lll", "mmm", "nnn", "ooo", "ppp"]})
    .on("click", function() {
        var d = $(this).data();
        d.b = d.a + 4;
        for (i = d.a; i < d.b && d.b <= d.pmmain.length; i++) { //change the value of a to be the limit
            $("#pm-page-main").append("<div class=\"main-box\"><div class=\"title-box\"><span         class=\"reg-wht-bold\">" + d.pmmain[i] + "</span></div><BR><BR><img src=\"imgs\\" + d.pmmain[i] + ".png\"></div>");
        }
        d.a = d.b;
    })
    .trigger('click');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="mains">Next Four</button>

<div id="pm-page-main"></div>

jonmrich · Accepted Answer · 2015-08-31T18:19:07.587

1

One simple change to your code:

$(document).ready(function() {
    $("#mains").one("click", function() {
        var pmmain = ["aaa", "bbb", "ccc", "ddd", "eee", "fff", "ggg", "hhh", "iii", "jjj", "kkk", "lll", "mmm", "nnn", "ooo", "ppp"];
        var a = 0;
        var b = 0;
        for (a = 0; a < 4; a++) { //change the value of a to be the limit
            $("#pm-page-main").append("<div class=\"main-box\"><div class=\"title-box\"><span         class=\"reg-wht-bold\">" + pmmain[a] + "</span></div><BR><BR><img src=\"imgs\\" + pmmain[a] + ".png\"></div>");
        }
    });
});

Fiddle here: http://jsfiddle.net/60mav6ev/2/

EDIT (by request):

To get the next set of four items upon button click, you need something like this:

$(document).ready(function() {
    var a;
    var b;
    var y;
    var z;
     var pmmain = ["aaa", "bbb", "ccc", "ddd", "eee", "fff", "ggg", "hhh", "iii", "jjj", "kkk", "lll", "mmm", "nnn", "ooo", "ppp"];
    $("#mains").one("click", function() {

         y = 0;
         z = y +4;
         a = 4;
         b = 0;
        for ( a=y; a < z; a++) {
            $("#pm-page-main").append("<div class=\"main-box\"><div class=\"title-box\"><span         class=\"reg-wht-bold\">" + pmmain[a] + "</span></div><BR><BR><img src=\"imgs\\" + pmmain[a] + ".png\"></div>");
        }

    });
    $("#fourmore").click(function() {

             b= a
             z = b +4;
    for (b=a; b < z; b++) {
            $("#pm-page-main").append("<div class=\"main-box\"><div class=\"title-box\"><span         class=\"reg-wht-bold\">" + pmmain[b] + "</span></div><BR><BR><img src=\"imgs\\" + pmmain[b] + ".png\"></div>");
    }
        a = a+4;
});
});

Fiddle: http://jsfiddle.net/60mav6ev/5/

edited Aug 31 '15 at 18:19

answered Aug 31 '15 at 17:31

jonmrich

4,233
5
42
94

what if i wanted to return the next 4 then? – Selim Aug 31 '15 at 17:38
8 total or items 5-8? – jonmrich Aug 31 '15 at 17:38
items 5-8. and then 9-12 and so on. if it helps. – Selim Aug 31 '15 at 17:41
You can change this: `for (a = 0; a < 4; a++) {` to `for (a = 4; a < 8; a++) {` where you start the value of `a` at the position of the first item and change the less than value to whatever to end item position is. The change above will give you items 5-8. – jonmrich Aug 31 '15 at 17:42
i might not have made my question very detailed, i apologize for that. now, what if there was a button where in if you click it 1 time it will show the first 4 and when you click it again, the next 4 and so on. – Selim Aug 31 '15 at 17:49
No problem. If you put all these `for` in the same function...it will continue to increment the value of `a`. That is, you can have multiple `for` statements if you want to get different sets of four at the same time. – jonmrich Aug 31 '15 at 17:51
i have updated my last reply just in case you haven't noticed. thank you for taking time to help me through this one. – Selim Aug 31 '15 at 17:52
That's a bit more complicated...see my updated answer for some new code and fiddle. If it helps, please accept the answer, so the question can be closed. – jonmrich Aug 31 '15 at 18:19
If you want just one button to call the first four and additional clicks on the same button to call the next four, check out @PeterKA's answer. – jonmrich Aug 31 '15 at 18:26

Return x items of an array at a time

2 Answers2

Linked