通过javascript向引导幻灯片动态添加JSON数据

通过javascript向引导幻灯片动态添加JSON数据,javascript,jquery,json,loops,bootstrap-carousel,Javascript,Jquery,Json,Loops,Bootstrap Carousel,我正在访问一个JSON提要来从中提取数据,并使用一点javascript和jQuery将数据放入一个引导转盘。我很难弄清楚如何正确地循环数据,以适当地传送转盘。我想做的是循环遍历每个JSON值,并按顺序为每行旋转木马提供三个值。我的尝试导致在旋转木马行的所有迭代中显示三个连续值,而不是移动到每行的下三个值 所以,本质上,我似乎有一个循环问题。我很难找到正确的循环方法。我尝试过几种选择,但没有一种效果合适。同样,我所要做的就是为旋转木马提供每行3个不同的项目/值 我注意到有一个相当类似的帖子,内容

我正在访问一个JSON提要来从中提取数据,并使用一点javascript和jQuery将数据放入一个引导转盘。我很难弄清楚如何正确地循环数据,以适当地传送转盘。我想做的是循环遍历每个JSON值,并按顺序为每行旋转木马提供三个值。我的尝试导致在旋转木马行的所有迭代中显示三个连续值,而不是移动到每行的下三个值

所以,本质上,我似乎有一个循环问题。我很难找到正确的循环方法。我尝试过几种选择,但没有一种效果合适。同样,我所要做的就是为旋转木马提供每行3个不同的项目/值

我注意到有一个相当类似的帖子,内容是关于提供一个无序列表,但我的响应实现没有起作用

谢谢你的帮助

<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>

var$=jQuery.noConflict();
var计数器=1;
//将全局配置设置为同步
$.ajaxSetup({
是的,
异步:false
});
$(文档).ready(函数(){
$.getJSON('http:JSON\u feedlocation…',函数(数据){
html=“”;
//转盘包装器divs-免于循环
html+=“”;
html+=“”;
//第一个循环行包装器
对于(data.content中的var i){
html+=“”;
html+=“”;
html+=“”;
html+=“”;
//第二个循环拉入特定值,每个循环三个值
对于(变量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]。已创建;
var-trister=data.content[i][“trister”];
html+=“”;
html+=“”;
html+=“”;
html+=“”;
html+=“”
html+=“”;
html+=“”;
html+=“”;
html+=“”;
html+=“”;
}
html+=“”;
html+=“”;
html+=“”;
html+=“”;
}
html+=“”;
html+=“”;
html+=“”;
html+=“”;
计数器=计数器+1;
document.getElementById(“api旋转木马”).innerHTML=html;
$(“.carousel div.item”).first().addClass(“活动”);
});
});

请提供json数据好吗?@medinasod--@self-content api和提要