Dynamically adding JSON data to Bootstrap slideshow via javascript

Question

I have a JSON feed I'm accessing to pull data from and am using a little javascript and jQuery to place the data into a Bootstrap carousel. I am having trouble figuring out how to properly loop the data, to feed the carousel appropriately. What I would like to do, is loop through each JSON value, and sequentially feed three values per row of the carousel. My attempts resulted in three sequential values showing in all iterations of the carousel rows, instead of moving on to the next three values per row.

So, in essence, I seem to be having a loop issue. I am having trouble figuring out the proper way to loop this. I've tried several options, but none have worked appropriately. Again, all I want is to feed the carousel with 3 distinct items/values per row.

I noticed a fairly similar question was posted regarding feeding an unordered list, but my implementation of the response did not work.

Thanks for any help.

<script>
var $ = jQuery.noConflict();
var counter = 1;
// Set the global configs to synchronous 
$.ajaxSetup({
cache: true,
async: false
});

$(document).ready(function() {

$.getJSON('http:JSON_feedlocation......', function(data) {  

            html = "";

                // Carousel wrapper divs - exempt from loop
                html += "<div class='container carousel carousel-show-one-at-a-time slide' data-interval='6000' data-ride='carousel' id='the-new-marketing-carousel'>";
                html += "<div class='carousel-inner'>";

                    // First Loop - row wrapper
                    for (var i in data.content) {                     

                    html += "<div class='item'>";
                    html += "<div class='newsblock panel-display etowah-newsblock clearfix etowah-newsblock-trio'>";   
                    html += "<div class='container'>";
                    html += "<div class='row'>";  

                        // Second loop to pull in specific values, three values per loop
                        for (var i = 0; i < 3; i++) {

                          var type = data.content[i]["type"];
                          var title = data.content[i]["title"];
                          var url = data.content[i].url;
                          var created = data.content[i].created;
                          var teaser = data.content[i]["teaser"];

                        html += "<div id='carousel-blocks' class='newsblock-col-single newsblock__content--first col-md-4 col-sm-4 col-tiny-4'>";
                        html += "<div class='panel-pane pane-bundle-etowah-newsblock-item'>";
                        html += "<div class='news-block news-block--medium'>";
                        html += "<a href='"+ url +"''>";
                        html += "<img class='block__img' src='http://img" + data.content[i].thumbnail.split('public/')[1].split('?')[0] + "' />";
                        html += "</a>";            
                        html += "<h3 class='news-block__title'>"
                        html += "<a href='"+ url +"'>"+ title +"";
                        html += "</a>";
                        html += "</h3>";
                        html += "</div>";  
                        html += "</div>"; 
                        html += "</div>"; 

                        }

                    html += "</div>";   
                    html += "</div>";
                    html += "</div>";
                    html += "</div>";

                    }

                html += "</div>";
                html += "</div>";
                html += "<a class='left carousel-control' href='#the-new-marketing-carousel' data-slide='prev'><i class='glyphicon glyphicon-chevron-left'></i></a>";
                html += "<a class='right carousel-control' href='#the-new-marketing-carousel' data-slide='next'><i class='glyphicon glyphicon-chevron-right'></i></a>";

                counter = counter + 1;

        document.getElementById("api-carousel").innerHTML=html;
        $(".carousel div.item").first().addClass("active");

  });
});
</script>

<div id="api-carousel">
    <!-- Carousel api -->
</div>