JavaScript Anzeige Array Ergebnisse in einer Tabelle

Question

I die folgende JavaScript-Schleife haben, die die Ergebnisse einer Suche Form einer Tabelle gibt

l = data.length; 
for (var i=0; i < l; i++) { 
    var row = $('<tr><td>' + data[i].email_address + '</td><td>' 
    + data[i].number_of_orders + '</td><td>' 
    + '£' + data[i].total_order_value + '</td></tr>'); 
    $('#Reports').append(row); 
} 

ähnliche

Ich muss das bearbeiten so habe ich eine Tabellenansicht wie diese

mit einem <th> die Domain-Namen, bevor die Ergebnisse dieser Domäne

Ich habe eine Variable mit der Domäne gesucht und meine Array enthält einen Schlüsselwert, welche die Domäne enthält

jemand mich in der richtigen Richtung ?

meine derzeitigen Überlegungen ist, dass ich die Suche var in meine Schleife einzufügen und nach jeder Schleife überprüfen, dass die Domäne nicht

geändert hat

jede Hilfe würde

Answer 1

Erstellen Sie anhand der Daten, die Sie haben, eine Datenstruktur, die Ihnen beim Erstellen der Tabelle hilft, BEVOR Sie die Tabelle tatsächlich erstellen.

Angenommen, wir haben folgende Daten

var data = [{ 
    email_address: 'someone@able.com', 
    number_of_ordrs: 4, 
    total_order_value: 5.56 
}, { 
    email_address: 'someone.else@bodge.com', 
    number_of_orders: 3, 
    total_order_value: 8.97 
}, { 
    email_address: 'another@able.com', 
    number_of_orders: 6, 
    total_order_value: 0.93 
}, { 
    email_address: 'someone@bodge.com', 
    number_of_orders: 6, 
    total_order_value: 0.93 
}]; 

ist Lassen Sie transformieren, so dass es so aussieht,

var newData: { 
    'able.com': [{ 
     email_address: 'someone@able.com', 
     number_of_orders: 4, 
     total_order_value: 5.56 
    }, { 
     email_address: 'another@able.com', 
     number_of_orders: 6, 
     total_order_value: 0.93 
    }], 
    'bodge.com': [{ 
     email_address: 'someone.else@bodge.com', 
     number_of_orders: 3, 
     total_order_value: 8.97 
    }, { 
     email_address: 'someone@bodge.com', 
     number_of_orders: 6, 
     total_order_value: 0.93 
    }] 
}; 

Wir haben auch eine andere Variable benötigen domains, ein Array, zu speichern und die Domains zu sortieren . In JavaScript, order of the properties is not guaranteed, wäre es also keine gute Idee, über das Objekt zu iterieren. Stattdessen verwenden wir domains, um die Bestellung sicherzustellen.

$(function() { 
 
    var data = [{ 
 
    email_address: 'someone@able.com', 
 
    number_of_orders: 4, 
 
    total_order_value: 5.56 
 
    }, { 
 
    email_address: 'someone.else@bodge.com', 
 
    number_of_orders: 3, 
 
    total_order_value: 8.97 
 
    }, { 
 
    email_address: 'another@able.com', 
 
    number_of_orders: 6, 
 
    total_order_value: 0.93 
 
    }, { 
 
    email_address: 'someone@bodge.com', 
 
    number_of_orders: 6, 
 
    total_order_value: 0.93 
 
    }]; 
 

 
    var newData = {}; 
 

 
    data.forEach(function(d) { 
 
    var domain = d.email_address.split('@')[1]; 
 
    // is this a new domain? 
 
    if (!newData.hasOwnProperty(domain)) { 
 
     newData[domain] = []; 
 
    } 
 
    // add entry 
 
    newData[domain].push(d); 
 
    }); 
 
    
 
    // get and sort domains alphabetically 
 
    var domains = Object.keys(newData).sort(); 
 
    
 
    //console.log(domains, newData); 
 
    
 
    // build table 
 
    var html = '<table>'; 
 
    domains.forEach(function(domain) { 
 
    html += '<tr><td colspan="3">' + domain + '</td></tr>'; 
 
    
 
    newData[domain].forEach(function(entry) { 
 
     html += '<tr>'; 
 
     html += '<td>' + entry.email_address + '</td>'; 
 
     html += '<td>' + entry.number_of_orders + '</td>'; 
 
     html += '<td>' + entry.total_order_value + '</td>'; 
 
     html += '</tr>'; 
 
    }); 
 
    
 
    }); 
 
    html += '</table>'; 
 
    
 
    $('#Reports').html(html); 
 
});

table { 
 
    border: 1px solid #000; 
 
    border-collapse: collapse; 
 
} 
 
td { 
 
    border: 1px solid #000; 
 
    padding: 5px; 
 
    text-align: center; 
 
}

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

 
<div id="Reports"></div>

Answer 2

groß sein, sollten Sie eine Variable mit Domain Name.

Stellen Sie sicher, dass alle eingegebenen Daten in der Reihenfolge der Domäne sind, wenn nicht, sollten Sie sie alphabetisch sortieren, indem Sie die Domäne beenden.

Als nächstes würden Sie eine if-Anweisung ausführen, wenn die Domäne dieses Eintrags gleich dem vorherigen Eintrag ist, andernfalls Zeile mit neuer Domäne einfügen. Dann fügen Sie einen neuen Eintrag ein.

Und aktualisieren Sie die Domain-Name-Variable auf die Domäne des vorherigen Eintrags. Es wird also alle Werte durchlaufen und bei Bedarf entsprechende Header hinzufügen.