Невозможно обновить страницу из нескольких запросов getJson - PullRequest
Новая
       42

Невозможно обновить страницу из нескольких запросов getJson

0 голосов
/ 25 сентября 2018

Я делаю html-страницу, где я отображаю данные с 3 разных сайтов WordPress API в 3 разных разделах html.Мой код скрипта такой: 

<script>
        $(document).ready(function(){
        $.getJSON("https://thebigscope.com/wp-json/wp/v2/posts?per_page=4",function(data) {
            $.each(data, function(key, val){
                $('#rss-english').append('<article class="portfolio-item pf-graphics pf-uielements"><div class="portfolio-image"><a href="'+val.link+'"><img src="'+val.better_featured_image.media_details.sizes.medium.source_url+'" alt="Mac Sunglasses"></a><div class="portfolio-overlay"><a href="'+val.link+'" class="center-icon" data-lightbox="iframe"><i class="icon-line-play"></i></a></div></div><div class="portfolio-desc"><h4><a href="'+val.link+'">'+val.title.rendered+'</a></h4></div></article>');
            })          
        })
    })
</script>
<script>
        $(document).ready(function(){
        $.getJSON("https://sparktv.in/tamil/wp-json/wp/v2/posts?per_page=4&categories=74",function(data) {
            $.each(data, function(key, val){
                $('#rss-tamil').append('<article class="portfolio-item pf-graphics pf-uielements"><div class="portfolio-image"><a href="'+val.link+'"><img src="'+val.better_featured_image.media_details.sizes.medium.source_url+'" alt="Mac Sunglasses"></a><div class="portfolio-overlay"><a href="'+val.link+'" class="center-icon" data-lightbox="iframe"><i class="icon-line-play"></i></a></div></div><div class="portfolio-desc"><h4><a href="'+val.link+'">'+val.title.rendered+'</a></h4></div></article>');
            })          
        })
    })
</script>
<script>
        $(document).ready(function(){
        $.getJSON("https://sparktv.in/hindi/wp-json/wp/v2/posts?per_page=4&categories=273",function(data) {
            $.each(data, function(key, val){
                $('#rss-hindi').append('<article class="portfolio-item pf-graphics pf-uielements"><div class="portfolio-image"><a href="'+val.link+'"><img src="'+val.better_featured_image.media_details.sizes.medium.source_url+'" alt="Mac Sunglasses"></a><div class="portfolio-overlay"><a href="'+val.link+'" class="center-icon" data-lightbox="iframe"><i class="icon-line-play"></i></a></div></div><div class="portfolio-desc"><h4><a href="'+val.link+'">'+val.title.rendered+'</a></h4></div></article>');
            })          
        })  
    })
</script>

Вот моя проблема, если я загружаюстраница, иногда один раздел отображается, иногда 2, а иногда ни один из них не отображается. Но когда я открываю консоль разработчика в Chrome, неожиданно отображаются все данные.

1 Ответ

0 голосов
/ 25 сентября 2018

В вашем подходе нет ничего плохого, я просто перестроил и сделал некоторые изменения, надеюсь, после этого у вас не возникнет никаких проблем. 

var getData=function(url){ return $.getJSON(url);}
function BindHTML(){
 getData("https://thebigscope.com/wp-json/wp/v2/posts?per_page=4").done(function(data){
      $.each(data, function(key, val){
            $("#rss-english").append('<article class="portfolio-item pf-graphics pf-uielements"><div class="portfolio-image"><a href="'+val.link+'"><img src="'+val.better_featured_image.media_details.sizes.medium.source_url+'" alt="Mac Sunglasses"></a><div class="portfolio-overlay"><a href="'+val.link+'" class="center-icon" data-lightbox="iframe"><i class="icon-line-play"></i></a></div></div><div class="portfolio-desc"><h4><a href="'+val.link+'">'+val.title.rendered+'</a></h4></div></article>');
        })  
 })
  getData("https://sparktv.in/tamil/wp-json/wp/v2/posts?per_page=4&categories=74").done(function(data){
       $.each(data, function(key, val){
            $('#rss-tamil').append('<article class="portfolio-item pf-graphics pf-uielements"><div class="portfolio-image"><a href="'+val.link+'"><img src="'+val.better_featured_image.media_details.sizes.medium.source_url+'" alt="Mac Sunglasses"></a><div class="portfolio-overlay"><a href="'+val.link+'" class="center-icon" data-lightbox="iframe"><i class="icon-line-play"></i></a></div></div><div class="portfolio-desc"><h4><a href="'+val.link+'">'+val.title.rendered+'</a></h4></div></article>');
        }) 
 })
 getData("https://sparktv.in/hindi/wp-json/wp/v2/posts?per_page=4&categories=273").done(function(data){
     $.each(data, function(key, val){
            $('#rss-hindi').append('<article class="portfolio-item pf-graphics pf-uielements"><div class="portfolio-image"><a href="'+val.link+'"><img src="'+val.better_featured_image.media_details.sizes.medium.source_url+'" alt="Mac Sunglasses"></a><div class="portfolio-overlay"><a href="'+val.link+'" class="center-icon" data-lightbox="iframe"><i class="icon-line-play"></i></a></div></div><div class="portfolio-desc"><h4><a href="'+val.link+'">'+val.title.rendered+'</a></h4></div></article>');
        }) 
 })

}
$(document).ready(function(){BindHTML();})
...