How to load data (regular numbers) from a json file using ajax into each slide of a slider?

D

denistesla2017-09-21 12:58:35

JavaScript

denistesla, 2017-09-21 12:58:35

There is an owl carousel slider, and 12 slides are spinning on it, each of which has 1 image in full screen. Task: it is necessary that for each image the numbers loaded using an ajax request from a json file are substituted. The fact is that the data in the json file will change, and therefore I decided to set the setInterval to 2 seconds for each ajax request. In this scenario, the slider does not want to work, has anyone encountered this? How to solve such a problem?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bet Slider</title>
    <link rel="stylesheet" href="libs/owl-carousel/assets/owl.carousel.min.css">
    <link rel="stylesheet" href="libs/owl-carousel/assets/owl.theme.default.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
<script>
    function ajax_get_json() {
        var hr = new XMLHttpRequest();

        hr.open("GET", "fights.json", true);

        hr.setRequestHeader("Content-type", "application/json");

        hr.onreadystatechange = function() {
            if (hr.readyState == 4 && hr.status == 200) {
                var data = JSON.parse(hr.responseText);
                var results = document.querySelector(".owl-stage");

                for (var obj in data) {
                    results.innerHTML += "<div class=\"item\">" + data[obj].fighterFirstCof + " - " + data[obj].fighterSecondCof + "</div>";
                }
                console.log(data);
            }
        }
        hr.send(null);

        document.querySelector(".owl-stage").innerHTML = "";
    }
</script>

<div id="results" class="owl-carousel owl-theme">
</div>

<script>
    //ajax_get_json();
    var req = setInterval(function() { ajax_get_json(); }, 2000);
</script>

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="libs/owl-carousel/owl.carousel.min.js"></script>
<script src="main.js"></script>

</body>
</html>