phantom phantom - 4 months ago 6
jQuery Question

incrementing index in each loop jQuery/javascript

I have a json file that contains paths to many images that I wish to add more image paths to occasionally. I am making a

GET
request to this file and adding the images to a html page. The issue I am having is using the
$.each
method is that the index is remaining the same, meaning that each image is repeated in each row, however what I want to do is append 3 different images in each row.

I know I can put
[index+1]
etc. however this will not scale the more images I have.

I hope this makes sense. If not let me know and I can provide more details.

Please see code below.

HTML

<div class="portrait-page"></div>


JAVASCRIPT

$.get('json/categories.json', function( data ){
$.each(data, function( index, value ) {
$('.portrait-page .container').append( "<div class='grid'><div class='col-1-3'><img src='" + data[index].image + "''></div><div class='col-1-3'><img src='" + data[index].image + "''></div><div class='col-1-3'><img src='" + data[index].image + "''></div></div>");
});
});


JSON file

[
{"image":"images/geysir.jpg"},
{"image":"images/burren.jpg"},
{"image":"images/cuba.jpg"},
{"image":"images/london.jpg"},
{"image":"images/vegas.jpg"},
{"image":"images/cliff.jpg"},
{"image":"images/timbaland.jpg"},
{"image":"images/burren.jpg"},
{"image":"images/che.jpg"}
]


CSS

[class*='col-'] {
float: left;
}
.col-1-3 {
width: 33.33%;
}
.grid:after {
content: "";
display: table;
clear: both;
}
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
[class*='col-'] {
padding: 5px 5px 0 5px;
}
.col-1-3 img {
width: 100%;
height: 300px;
}

Answer

If you're going to do multiple images per iteration, you don't want $.each, you want your own loop.

You might do something like this:

If you know data.length will be an exact multiple of 3:

$.get('json/categories.json', function( data ){
    var container = $(".portrait-page .container");
    var markup;
    var index = 0;
    while (index < data.length) {
        markup = "<div class='grid'>";
        for (var n = 0; n < 3; ++n) {
            markup += "<div class='col-1-3'><img src='" + data[index++].image + "'></div>";
        }
        markup += "</div>";
        container.append(markup);
    }
});

If you don't, we just throw in an if:

$.get('json/categories.json', function( data ){
    var container = $(".portrait-page .container");
    var markup;
    var img;
    var index = 0;
    while (index < data.length) {
        markup = "<div class='grid'>";
        for (var n = 0; n < 3; ++n) {
            if (index < data.length) {
                img = "<img src='" + data[index++].image + "'>";
            } else {
                img = "";
            }
            markup += "<div class='col-1-3'>" + img + "</div>";
        }
        markup += "</div>";
        container.append(markup);
    }
});

Example:

var data = JSON.parse(
  '[' +
  '{"image":"one"},' +
  '{"image":"two"},' +
  '{"image":"three"},' +
  '{"image":"four"},' +
  '{"image":"five"},' +
  '{"image":"six"},' +
  '{"image":"seven"}' +
  ']'
);
var container = $(".portrait-page .container");
var markup;
var img;
var index = 0;
while (index < data.length) {
  markup = "<div class='grid'>";
  for (var n = 0; n < 3; ++n) {
    if (index < data.length) {
      img = "[img src='" + data[index++].image + "']";
    } else {
      img = "";
    }
    markup += "<div class='col-1-3'>" + img + "</div>";
  }
  markup += "</div>";
  container.append(markup);
}
div.col-1-3 {
  display: inline-block;
}
<div class="portrait-page">
  <div class="container"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Comments