Matching div heights with jquery while loading JSON content

Question

I'm trying to match div heights with jquery while importing content from a JSON file. Upon the first view of the page the match height finishes loading before all the content from the JSON file can finish loading in. As a result, the images from the JSON file get cut off by the .grid-item div. Once all the JSON content has loaded in I can resize the browser window or reload the page and the match height works properly. But if I empty cache and hard reload the match height will finishing loading again before the JSON content can finish loading.

I've tried putting the .matchHeight outside of the $.getJSON, which allows all the content to load from the JSON file but for some reason doesn't match the height for each div. Each div has their own height.

How do I tell the .matchHeight to wait until all of the JSON content has finished loading upon first view of the page?

I'm using the jquery.matchHeight.js code from GitHub.

Javascript

$(document).ready(function() {

$.getJSON( "locations.json", function( data ) {

var htmlcontent = "";

      $.each( data.locations, function( key, index ) {

        var name = index.locationName;
        var state = index.locationState;
        var img = index.locationImage;
        var link = index.locationLink;

        htmlcontent += '<div class="grid-item" id"' + key + '"><h4>' + name + '</h4><h5>' + state + '</h5>' + '<img src="' + img + '">' + '</div>' ;

      });

         $( '.main' ).append(htmlcontent);
         $( '.grid-item' ).matchHeight();

    });

});

HTML

<div class="main">

</div>

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script type="text/javascript" src="jquery.matchHeight.js"></script>
<script src="loadjson.js"></script>

CSS

img {
    margin-top: 15px;
}

.main {
    text-align: center;
}

.grid-item {
    padding: 20px;
    border: 1px solid black;
    background-color: #eeeeee;
    width: 275px;
    float: left;
}

flexbox has equal height virtually "build in", so you should let CSS take care of the equal height issue based on content, and the script only of providing/replacing that content. — CBroe
I have created a plnkr with your code. But I can't see the issue that you are getting. plnkr.co/edit/BCptghU1IxkqFc7Xqln1?p=preview — amanpurohit
The locationImage in my json is using a local image file, not just text. — cyoung11740

Tony M Tony M · Accepted Answer · 2017-10-27T19:15:30

If you need to ensure that $.getJSON completes before running anything else, you can use done(). See $.getJSON from jQuery docs

You can implement it like so:

$.getJSON( "locations.json", function( data ) { // data optional
  // do stuff with data
}).done(function(data){
  // check data, if good then run matchHeight()
  $( '.grid-item' ).matchHeight();
});

*In addition to the $(window).on("load", handler) answer given

Matching div heights with jquery while loading JSON content

2 Answers