如何将json数据插入owl carousel

问题描述

我有一个来自FB api评论的JSON数据，我想将JSON中的数据插入到owl carousel div元素中。我希望每个评论都在单独的div元素中创建，并且该div元素在猫头鹰轮播中并作为轮播使用。

I have a JSON data from FB api reviews, and I want to insert the data from the JSON to an owl carousel div elements. I want each review to be created in a separate div element and that div element to be inside the owl carousel, and to work as carousel.

在HTML中，我只有

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

以前我已经设置了轮播，现在的问题是如何从JSON和在div owl-carousel类中插入，但是我希望将要插入其中的div接受owl-item类，等等。

Previously I have set up the carousel, now my question is how to take the data from the JSON and insert in the div owl-carousel class but I want the divs that will be inserted inside to take the class owl-item, etc.

这是JavaScript：

Here is the 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

    });
});

推荐答案

这是我到目前为止尝试过的：

This is what I have tried so far:

$(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
});

这篇关于如何将json数据插入owl carousel的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！