Блог

Я пытаюсь создать слайдер карты с данными json следующим образом: http://femkreations.com/projects/ajax/ajax-carousel/index.php и вместо этого я хочу использовать данные json из этого URL: https://api.thecatapi.com/v1/breeds для отображения 5 карточек с именем, описанием и изображением кошек. Я уже загрузил данные json с помощью XMLHttpRequest, но я действительно не знаю, что мне нужно делать дальше. Я новичок в этих вещах, и я надеюсь, что кто-нибудь сможет мне помочь.

Сначала вы должны определить шаблон, который будет использоваться в соответствии с вашими собственными данными JSON, допустим, ваш JSON выглядит так для упрощения

 {
  cats: [

       {
        name: "rico",
        power_level: "500",
        bio: "nice dude"
       },
       {
        name: "johnnyboi",
        power_level: "1200",
        bio: "bad guy"  
       },
       {
        name: "earl",
        power_level: "over9000",
        bio: "stronk guy"
       }
     ]
}
 

этот парень определяет шаблон в HTML-коде следующим образом (где-то посередине HTML-кода). Обратите внимание, что вам придется поработать или скопировать динамик класса CSS.

 <script id="speakerstpl" type="text/template">
{{#speakers}}
    <div class="speaker">
        <img src="images/{{shortname}}_tn.jpg" alt="Photo of {{name}}" />
        <h3>{{name}}</h3>
        <h4>{{reknown}}</h4>
        <p>{{bio}}</p>
    </div>
{{/speakers}}
</script>
 

Итак, давайте адаптируем шаблон так, как вы хотите, для JSON, который я написал выше:

 <script id="speakerstpl" type="text/template">
{{#cats}}
    <div class="speaker">            
        <h3>{{name}}</h3>
        <h4>{{power_level}}</h4>
        <p>{{bio}}</p>
    </div>
{{/cats}}
</script>
 

Теперь, прежде чем мы воспользуемся магией функций, обратите внимание, что на этой странице используются следующие внешние библиотеки (не забудьте добавить их в свой документ):

 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.cycle/2.9999.8/jquery.cycle.all.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.0/mustache.min.js" type="text/javascript"></script>
 

Давайте сделаем вызовы:

 var data = {
  cats: [

       {
        name: "rico",
        power_level: "500",
        bio: "nice dude"
       },
       {
        name: "johnnyboi",
        power_level: "1200",
        bio: "bad guy"  
       },
       {
        name: "earl",
        power_level: "over9000",
        bio: "stronk guy"
       }
     ]
}

var template = $('#speakerstpl').html();
var html = Mustache.to_html(template,data);
$('#carousel').html(html); //this element is a div inside another div (wrapper)
//final step for the rotation/cycle
$('#carousel').cycle({
        fx: 'fade',
        pause: 1,
        next: '#next_btn',
        prev: '#prev_btn',
        speed: 500,
        timeout: 10000
    });
 

РЕДАКТИРОВАТЬ: вот простой код из https://developpaper.com/xmlhttprequest-for-asynchronous-requests / для того, чтобы получить ваши данные, кстати:

 var data = {cats: []};
var xhr = new XMLHttpRequest(),
method = "GET",
url = "https://api.thecatapi.com/v1/breeds";

xhr.open(method, url, true);
xhr.responseType = "json";
xhr.onreadystatechange = function () {

if(xhr.readyState === xhr.DONE) {
  if (xhr. status === 200) {// successful request
    console.log(xhr.response);
    //capture this response using your data variable
    data.cats = xhr.response;
     
  } else {// request failed
      console.log(xhr.response);
  }    
 }
};
xhr.ontimeout = function(event){
console.log('request timeout!');
}
xhr.setRequestHeader('Content-Type','application/json');
xhr.send();