【问题标题】:How to insert json data to owl carousel如何将json数据插入猫头鹰轮播
【发布时间】:2019-05-16 11:31:15
【问题描述】:

我有一个来自 FB api 评论的 JSON 数据,我想将 JSON 中的数据插入到 owl carousel div 元素中。我希望每个评论都在一个单独的 div 元素中创建,并且该 div 元素位于 owl carousel 内,并作为 carousel 工作。

在 HTML 中我只有这个:

<div id="carousel" class="owl-carousel" style="color: white;">
</div>

之前我已经设置了轮播,现在我的问题是如何从 JSON 中获取数据并插入到 div owl-carousel 类中,但我希望将插入其中的 div 获取类 owl-item,等等

这里是 JavaScript:

$(document).ready(function () {
    var url = "https://graph.facebook.com/v3.2/...";

    $.getJSON(url, function (data) {
        var items = [];
        $.each(data.data, function (i, obj) {
            var text = '<p class="review_text">' + obj.review_text + '</p>'
            var date = '<p class="date">' + obj.created_time + '</p>'

        }); //Here I get the review text and the created date of the review
            //I want to create div element for each review and insert that div in the owl carousel

    });
});

【问题讨论】:

  • 到目前为止你尝试了什么?
  • 我在下面添加了我尝试过的答案

标签: javascript html json ajax carousel


【解决方案1】:

这是我迄今为止尝试过的:

$(document).ready(function () {
    var url = "https://graph.facebook.com/v3.2/...";

    $.getJSON(url, function (data) {
        var items = [];
        $.each(data.data, function (i, obj) {
            //$('#target').append($('<div/>', { id: 'dummy' + i }))
            var text = '<p class="review_text">' + obj.review_text + '</p>'
            var date = '<p class="date">' + obj.created_time + '</p>'
            a = counter();
            $("#carousel").find("[data-index='" + i + "']").append(text, date)

        });
        $('#scripts').append('<input type="number" id="spam_key" value= ' + a + '>');


    });
    var wrapper = document.getElementById("carousel");
    var myHTML = '';
    for (b = 0; b <= 230; b++) { //but here instead of 230 I want to get the value of a
        myHTML += '<div id="review" data-index=' + (b) + '></div>';
    }
    wrapper.innerHTML = myHTML
});

【讨论】:

    猜你喜欢
    • 2022-12-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-10-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多