Unable to update page from Multiple getJson requests

Question

I am making a html page where I am displaying data from 3 different sites wordpress API into 3 different sections of html.My script code is like this.

<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>

Here my problem is if i load the page, sometimes one section is displayed, sometimes 2 and sometimes none of them get displayed.But when I open developer console in chrome, suddenly all data is getting displayed.

Answer 1

There is nothing wrong in your approach I just re-arrange and done some modification hope after this you will not face any problem.

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