promises in javascript meddle with the rest of the code

Question

I have the following js file, and I'm trying to create a table with both data from a csv of today and yesterday. I had trouble with race conditions before, so tried using promises now, and ended up at the following code, but it 1) doesn't seem to work 2) disallows all other code to work, for e.g. my calendar boot $(document).ready(function() { $('#datetimepicker1').datetimepicker(); });

The .js file:

$(document).ready(function() { $('#datetimepicker1').datetimepicker(); });
var p = function(url){
    return new Promise(function(resolve, reject){
        $.ajax({
            url: url,
            crossDomain:true,
            dataType:"jsonp",
            'success': function(response){ 
          $(".domain").append(response.results.collection1[0].date);
                var collection = response.results.collection2;
                for (var i = 1; i < collection.length; i++){  
                    $(".table-group1").append('<tr> <td>' + collection[i].domain.href + '</td>'+'<td>' + collection[i].dns + '</td>'+'<td> ' + collection[i].mail + '</td>'+'<td> ' + collection[i].web + '</td> </tr>');
                }
            resolve(collection);
            },
            'error': function(e){
                reject(e);
            }
        })
    })
}    
p(url_today).
    then(function (collection_today) {
        return p(url_yesterday).then(function(collection_yesterday){
            $(".table-group1").append('<tr><td>' + collection_today.domain.href + '</td>'+'<td>' + collection_today.dns + '</td>'
                +'<td> ' + collection_today.mail + '</td>'+'<td> ' + collection_today.web + '</td> <td>' + collection_yesterday.domain + '</td> <td>'
                + collection_yesterday.dns + '</td><td>'+ collection_yesterday.mail + '</td> <td>'+ collection_yesterday.web + '</td> </tr>');
        })
    })
    .catch(function(e){
        console.error(e);
    });

The html file:

    <!-- Calendar -->  

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Table -->

<div class= "container_1">
<div class="panel panel-info">

<table class="table" border="1">
<th class="panel-heading"> </th>
<tr class="domain"> </tr>
<tr class="table-group1">
</tr> 
</table>

There are some things in the code that don't make sense. Your `p()` function ends up appending results to `.table_group1`. You call it first with p(url_today), then when that finishes, you do `p(url_yesterday)`, then when that finishes, you append the same collection that `p(url_yesterday)` already appended to `.table-group1` again. That doesn't make sense. — jfriend00, Jan 27 '16 at 22:02
Also, you don't need to make a new promise for your ajax function or resovle or reject it. You can just do `return $.ajax(...)` because `$.ajax()` already returns a promise. — jfriend00, Jan 27 '16 at 22:03
Avoid the [`Promise` constructor antipattern](http://stackoverflow.com/q/23803743/1048572) and [use `Promise.resolve`](http://stackoverflow.com/a/31327725/1048572) instead — Bergi, Jan 27 '16 at 23:02
If your other code breaks, that suggest a syntax error. Any messages in the console? — Bergi, Jan 27 '16 at 23:03
@Bergi is correct. You should not use the `Promise` constructor. `$.ajax` will return a promise object which provide `.done()` `.fail()` `.always()` `.then()`. In function `p()` should `return $.ajax(....);` directly, but without `'success'` inside the ajax. Then do this belows, `p(url_today).done(/*the success things. or calling another p() here*/).fail(/**/)`. Usage of `.done()` in ajax should follow https://api.jquery.com/jQuery.ajax/ — RaymondM, Jan 28 '16 at 02:01
@RaymondM: Except you should not use `done` or `fail`, but only `then`. — Bergi, Jan 28 '16 at 05:04

Jaromanda X · Answer 1 · 2016-01-27T23:13:16.470

This doesn't address the underlying problems with the logic or best practice use of Promises etc. It addresses the issue of including the code stopping other code from working

The reason why you are having issues is that you have syntax errors in the code ... e.g. line 15 needs a , - your last then code isn't liked by js lint -

if you change it to the following

        $(".table-group1").append('<tr><td>' + collection_today.domain.href + '</td>' + '<td>' + collection_today.dns + '</td>' +
            '<td> ' + collection_today.mail + '</td>' + '<td> ' + collection_today.web + '</td> <td>' + collection_yesterday.domain + '</td> <td>' +
            collection_yesterday.dns + '</td><td>' + collection_yesterday.mail + '</td> <td>' + collection_yesterday.web + '</td> </tr>');

see the lines END with + and continue on the next line, rather than lines beginning with +

One other issue is that the code will run immediately - maybe before your DOM is ready

it looks like all the code should be wrapped in $(document).ready not just the first line

promises in javascript meddle with the rest of the code

1 Answers1