pl: jQuery: Daten in zwei iframes unterschiedlich nutzen

Beitrag lesen

Untenstehend ein Beispielcode. Die Daten werden als CSV per AJAX vom Server geladen. Im AJAX Callback wird das Array für Mustache erstellt. Und mit diesem Array wird dann das Template gerendert:

<script src="/jquery.min.js"></script>
<script src="/mustache.js"></script>

<script type="text/template" id="tt">
<table class="grid" style="width:100%">
    <tr style="text-align:left">
        <th>WKR_NR</th>
        <th>WKR_NAME</th>
        <th>LAND_NR</th>
        <th>LAND_NAME</th>
        <th>LAND_ABK</th>
    </tr>
    {{#loop}}
    <tr>
        <td>{{& WKR_NR}}</td>
        <td>{{& WKR_NAME}}</td>
        <td>{{& LAND_NR}}</td>
        <td>{{& LAND_NAME}}</td>
        <td>{{& LAND_ABK}}</td>
    </tr>
    {{/loop}}
</table>
</script>

<div id="out"></div>


<script>
function load_csv(){
    var xhr = new XMLHttpRequest();
    xhr.open("GET","/wahlkreise.csv");
    xhr.onload = function(){
        var lines = this.response.split("\n");
        var headlines = lines.shift();
        var cols = headlines.split(";");
        //console.log(cols); // WKR_NR WKR_NAME LAND_NR LAND_NAME LAND_ABK
        var wahlkreise = [];
        while( lines.length ){
            var line = lines.shift();
            var values = line.split(";");
            var wk = {};
            for(var i = 0; i < cols.length; i++){
                wk[cols[i]] = values[i];
            }
            wahlkreise.push(wk);
        }

        $('#out').html( Mustache.render($('#tt').text(), {loop:wahlkreise}) );
    };
    xhr.send();
}

load_csv();

</script>

Das Ergebnis ist eine Tabelle, siehe Template. MFG