jQuery append nicht in der Reihenfolge

Question

Ich benutze append(), um einige JSON in einer Cordova App zu analysieren. Hier ist er Code-Schnipsel

renderRotaView: function() { 
     $('.tab-button').removeClass('active'); 
     $('#rota-tab-button').addClass('active'); 
     $('#title').html('Rota'); 
     $('#rendered').html('<div id="content"><table>'); 
     $.getJSON('https://www.thegatewaychurch.info/wp-admin/admin-ajax.php',{ action: "ca_rota", service_id: 1 }, function(data) { 
       $.each(data, function(arrayIndex, userObject){ 
         $('#rendered').append('<tr><td>' + userObject.job+'</td><td>'+ userObject.people + '</td></tr>'); 
       }); 

     }); 
     $('#rendered').append('</table></div>'); 
    } 

die in

Ergebnisse

<div id="rendered"><div id="content"> 
<table></table> 
</div> 
<tr><td>Trailer</td><td>#</td></tr> 
<tr><td>Setup</td><td>#</td></tr> 
<tr><td>Welcome </td><td>#</td></tr> 
<tr><td>Hotspot</td><td>#</td></tr> 
<tr><td>Worship Leader</td><td>#</td></tr> 
<tr><td>Singers</td><td>#</td></tr> 
<tr><td>PA</td><td>#</td></tr> 
<tr><td>Preacher</td><td>#</td></tr> 
<tr><td>Catering</td><td>#</td></tr> 
<tr><td>Livewires 0-3s</td><td>#</td></tr> 
<tr><td>Livewires 3+</td><td>#</td></tr> 
<tr><td>Explorers Infant</td><td>#</td></tr> 
<tr><td>Explorers Juniors</td><td>#</td></tr> 
<tr><td>Youth</td><td>#</td></tr> 
</div> 

Also das Anfügen innerhalb des .getJSON ist nicht in der Mitte. Was mache ich bitte falsch?

Answer 1

Es ist, weil Sie es innerhalb div $('#rendered') anhängen. Ändern Sie dies zu $('#rendered table'). Verwenden Sie den Code unten

renderRotaView: function() { 
     $('.tab-button').removeClass('active'); 
     $('#rota-tab-button').addClass('active'); 
     $('#title').html('Rota'); 
     $('#rendered').html('<div id="content"><table>'); 
     $.getJSON('https://www.thegatewaychurch.info/wp-admin/admin-ajax.php',{ action: "ca_rota", service_id: 1 }, function(data) { 
       $.each(data, function(arrayIndex, userObject){ 
         $('#rendered table').append('<tr><td>' + userObject.job+'</td><td>'+ userObject.people + '</td></tr>'); 
       }); 

     }); 
     $('#rendered').append('</table></div>'); 
    } 

Answer 2

Erst letzte Zeile (.append) innerhalb .getJSON Rückruf bewegen:

renderRotaView: function() { 
     $('.tab-button').removeClass('active'); 
     $('#rota-tab-button').addClass('active'); 
     $('#title').html('Rota'); 
     $('#rendered').html('<div id="content"><table>'); 
     $.getJSON('https://www.thegatewaychurch.info/wp-admin/admin-ajax.php',{ action: "ca_rota", service_id: 1 }, function(data) { 
       $.each(data, function(arrayIndex, userObject){ 
         $('#rendered table').append('<tr><td>' + userObject.job+'</td><td>'+ userObject.people + '</td></tr>'); 
       }); 
       $('#rendered').append('</table></div>'); 
     }); 
    } 

Answer 3

Mein Vorschlag ist es, die neuen dom Elemente on the fly erstellen jQuery mit:

var data = [{"job": "Trailer", "people": "Andy Moyle, Maarten Klem"}, { 
 
    "job": "Setup", 
 
    "people": "Andy King, Jenny King" 
 
}, {"job": "Welcome ", "people": "Adam Dixon, Ivory Dixon"}, { 
 
    "job": "Hotspot", 
 
    "people": "Baptisms" 
 
}, {"job": "Worship Leader", "people": "Matt Weatherill"}, { 
 
    "job": "Singers", 
 
    "people": "Tammy Dixon" 
 
}, {"job": "PA", "people": "Maarten Klem"}, {"job": "Preacher", "people": "Liz Hentschel"}, { 
 
    "job": "Catering", 
 
    "people": "Kath Blacklock, Kay Taylor" 
 
}, {"job": "Livewires 0-3s", "people": "Parents"}, { 
 
    "job": "Livewires 3+", 
 
    "people": "Jo Bruce, Ruth Duncombe" 
 
}, {"job": "Explorers Infant", "people": "Pat Amos, Jenny"}, { 
 
    "job": "Explorers Juniors", 
 
    "people": "Gav Raynor, Caleb Vonk" 
 
}, {"job": "Youth", "people": "Baptisms"}]; 
 

 
$('#rendered').append($('<div/>', {id: 'content'}) 
 
       .append($('<table/>') 
 
       .append($('<tbody/>')) 
 
      ) 
 
     ); 
 
$.each(data, function (arrayIndex, userObject) { 
 
    $('#rendered table tbody').append($('<tr/>') 
 
     .append($('<td/>', {text: userObject.job})) 
 
     .append($('<td/>', {text: userObject.people}))); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="rendered"></div>