javascript not calling ajax for all records in uploaded CSV

Question

I have written a code to parse uploaded CSV and send requests to Places API for all records in CSV, then display them on CSV. Code works fine for small number of records in an csv, but when I try it on records more than 400, it doesn't display all the results.

Web page is live on api.pkadmissions.com and CSV is here CSV

I have tried several ways, like callbacks, but no luck

Here is Javascript and HTML Table code:

            <table class="table table-hover table-condensed" id="myTable">
                <tr>
                    <td>Name</td>
                    <td>Address</td>
                    <td>Phone</td>
                    <td>Website</td>
                    <td>Rating</td>
                    <td>Lat</td>
                    <td>Lng</td>
                </tr>
            </table>            
        </div>

Code to Parse CSV is:

            function uploadDealcsv () {}; 
            var parsedata_obj={results:[]};
            var parsedata=[]
            /*------ Method for read uploded csv file ------*/
            uploadDealcsv.prototype.getCsv = function(e) {

                let input = document.getElementById('qw');
                if(input){
                    input.addEventListener('change', function() {
                        $('#data').remove();
                        if (this.files && this.files[0]) {

                            var myFile = this.files[0];
                            var reader = new FileReader();

                            reader.addEventListener('load', function (e) {

                                let csvdata = e.target.result; 
                parseCsv.getParsecsvdata(csvdata); // calling function for parse csv data 
            });

                            reader.readAsBinaryString(myFile);
                        }
                    });
                } }

                /*------- Method for parse csv data and display --------------*/
                uploadDealcsv.prototype.getParsecsvdata = function(data) {

        let newLinebrk = data.split("\n");
        for(let i = 0; i < newLinebrk.length; i++) {

            parsedata.push(newLinebrk[i].split(","))
        }
           // console.log(parsedata);

           send_request(parsedata,function(a){console.log('Completed',a);});

       }

Here is code that make AJAX calls to php page that further calls API, note that send_request method is called from method which parses csv

       var send_request = (parsedata,callback)=>{
         console.log(parsedata.length)
         for(var i=0;i<parsedata.length;i++){
            console.log(i+ " - "+ parsedata[i][0]);
            // alert(parsedata_obj.results.length+ " - "+ parsedata[i][0]);
            if(!parsedata[i][0]){
                continue
            }
            var site_name = parsedata[i][0].split('o/a')
            if(site_name.length>1){
                site_name = site_name[1];
            }
            else{
                site_name=site_name[0];
            }
            var desired = site_name.replace(/[^\w\s]/gi, '')
            var search_string = desired+' '+parsedata[i][3];
            timeouter(search_string)
        }
        callback(1);
    }
    function timeouter(search_string){
        setTimeout(
            first_call(search_string,(result)=>{
                console.log(result);
                add_tr(result);
            }),1000);
    }
    function first_call(search_string,callback){
        $.ajax({url: 'getdata.php',
            timeout:30000,
            type:'POST',
                    data:{
                        search_string:search_string.rep_all(' ','%20')
                    },
                    success: function(result1){
                        result1= JSON.parse(result1);
                        if(result1.status=='OK'){
                            var placeid = result1.candidates[0].place_id;
                            secondcall(placeid,(result)=>{
                                result=JSON.parse(result);

                                callback(result);
                            });

                        }
                        else{
                            callback({'result':search_string,'status':'NO_RESULTS'})
                        }
                    }
                });
    }
    function secondcall(placeid,callback){
        $.ajax({url: 'getdata.php',
            timeout:30000,
            data:{
                place_id:placeid
            },
                        type:'POST',
                        success:function(result){
                            callback(result);
                        }
                    })
        }

This one just adds a row to table:

    function add_tr(result){
        var name,phone,addr,lat,lng,rating,website='';

        data = result.result;
    // console.log(result);
    if(result.status=='NO_RESULTS'){
        name = data;
        $('#myTable tr:last').after('<tr id="data"><td>'+name+'</td><td></td><td></td><td></td><td></td><td></td><td></td></tr>');
    }
    else if(result.status=='OK'){

        if(data.name){
            name = data.name;   
        }
        if(data.hasOwnProperty('formatted_phone_number')){
            phone= data.formatted_phone_number;
        }
        if(data.hasOwnProperty('formatted_address')){
            addr = data.formatted_address;
        }
        if(data.hasOwnProperty('website')){
            website = data.website;
        }
        if(data.hasOwnProperty('rating')){
            rating = data.rating;
        }
        if(data.hasOwnProperty('geometry')){
            lat =data.geometry.location.lat;
        }
        if(data.hasOwnProperty('geometry')){
            lng = data.geometry.location.lng;   }
        $('#myTable tr:last').after('<tr>'+
            '<td>'+name+'</td>'+
            '<td>'+addr+'</td>'+
            '<td>'+phone+'</td>'+
            '<td>'+website+'</td>'+
            '<td>'+rating+'</td>'+
            '<td>'+lat+'</td>'+
            '<td>'+lng+'</td>'+
            '</tr>');
    }
    console.log(parsedata_obj.results.length);
}
var parseCsv = new uploadDealcsv();
parseCsv.getCsv();
</script>

rmac38 · Answer 1 · 2019-07-13T08:35:42.753

0

I have not tested your code but I think the problem is that 400 rows fire too many AJAX requests at the same time. Maybe you can try the solution of this question:

How can I make batches of ajax requests in jQuery?

edited Jul 13 '19 at 08:35

answered Jul 13 '19 at 08:30

rmac38

123
7

do you mean setTimeout? this does not work. you have to wait for the response of the request – rmac38 Jul 13 '19 at 08:40
for that I am using callbacks – Ayyan Khan Jul 13 '19 at 08:40
have you monitored the ajax requests? how many fire at the same time? – rmac38 Jul 13 '19 at 08:44
603, but there should be more than this – Ayyan Khan Jul 13 '19 at 08:46
mh i still think it is a timing issue with too many requests at the same time. if you put the problem on for example jsfiddle i will have a look – rmac38 Jul 13 '19 at 08:49
i cannot change javascript on your site and running this local i get cross origin erros. – rmac38 Jul 13 '19 at 09:01
I got the issue, actually `timeout` was set to 30s which cancelled many pending requests – Ayyan Khan Jul 13 '19 at 09:06

javascript not calling ajax for all records in uploaded CSV

1 Answers1