0

I have the JSOM script to get data from a SharePoint list on my page of different countries in different DIV, i am calling the function in document.ready as many number of times as there are number of countries, but i have an alert just before i call the function and if i remove the alert(country_list[i]) code does not work.

How can i fix this?

 <script type="text/javascript">
 $(document).ready(function(){
    var country_list = ["Belgium", "Brazil","Canada", "Germany","USA", "Other countries"];
    for(var i=0; i<country_list.length; i++)
    {
        alert(country_list[i]);
        retrieveListItems_berba(country_list[i]);
    }
    $(".accordion_head").click(function(){

        if ($('.accordion_body').is(':visible')) {
            $(".accordion_body").slideUp(600);
            $(".plusminus").text('+');
        }
        $(this).next(".accordion_body").slideDown(600); 
        $(this).children(".plusminus").text('-');
    });


});

function retrieveListItems_berba(country) {
    var clientContext = new SP.ClientContext.get_current();
    var oList = clientContext.get_web().get_lists().getByTitle('xyz');

    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml("<View><Query><Where><Eq><FieldRef Name=\'Country\' /><Value Type=\'Choice\'>"+ country +"</Value></Eq></Where></Query>" + 
        '<RowLimit>100</RowLimit></View>'
    );
    this.collListItem = oList.getItems(camlQuery);
    clientContext.load(collListItem);
    clientContext.executeQueryAsync(
        Function.createDelegate(this, this.onQuerySucceeded), 
        Function.createDelegate(this, this.onQueryFailed)
    );
}

function onQuerySucceeded(sender, args) {

    var counter = 1;
    var LiTextCountry = '';
    var listItemInfo = '';
    var listItemEnumerator = collListItem.getEnumerator();

    while (listItemEnumerator.moveNext()) {

        var oListItem = listItemEnumerator.get_current();
        var ContactName= oListItem.get_item('ContactName')
        var Title= oListItem.get_item('Title'); 
        var Country= oListItem.get_item('Country');
        var image= oListItem.get_item('Image').get_url(); 

        var ULIDCountry= document.getElementById(Country+counter);

        LiTextCountry = "<div class='media-left'><img src='" + image + "' class='media-object' style='width:60px'></div>" +
                  "<div class='media-body'><h4 class='media-heading'>" + ContactName +"</h4><span>" + Title + "</span>"+
                  "</div>";

         ULIDCountry.innerHTML = LiTextCountry;
         counter++;

    }
}

function onQueryFailed(sender, args) {
    alert('Request failed. ' + args.get_message() + 
        '\n' + args.get_stackTrace());
}


</script>
Jared Smith
  • 19,721
  • 5
  • 45
  • 83
paru upreti
  • 45
  • 8
  • Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) – Jared Smith Dec 13 '17 at 13:18
  • 1
    The reason the `alert` makes it work is that `alert` is blocking: at each iteration of the loop it holds up the processing until the async request catches up but that won't necessarily save you on a non-local network request. Look into promises and specifically `Promise.all`. – Jared Smith Dec 13 '17 at 13:20
  • Thanks Jared, I think I have to read about it looks little complicated but just saw the brief and looks this is what can resolve the issue. – paru upreti Dec 17 '17 at 17:11

0 Answers0