Javascript - Erstellen Tabelle mit Lenker

Question

ich eine index.html, wo ich ein div für Tisch haben, dass ich mit Javascript bin bevölkern:

<div class="table-responsive table-hover"> 
    <table class="table" id="table"> 
    </table> 
</div> 

I Lenkervorlagendatei erstellt haben:

<tr> 
    <td>{{ avatar }}</td> 
    <td>{{ name }}</td> 
    <td>{{ homepage }}</td> 
    <td>{{ score }}</td> 
</tr> 

In meinem Skript bin ich die Vorlage importieren und versuche, Daten zu senden, die ein Array von Objekten ist, die ich von einem API-Endpunkt bekomme, mache ich eine forEach Schleife auf eine array von Objekten zuerst und eine createHtml Funktion aufrufen:

var tableTemplate = require('../../templates/table.handlebars'); 

var createHtml = function(data) { 
    console.log(data); 
    var table = document.querySelector('#table'); 
    table.innerHTML = tableTemplate({ 
     avatar: data.owner.avatar_url, 
     name: data.full_name, 
     homepage: data.homepage, 
     score: data.score 
    }); 
} 

array.forEach(createHtml); 

Aber, obwohl ich nur createHtml für die Tabelle die erste Zeile in der Funktion in der Konsole protokolliert alle Objekte aus dem Array erhalten wird erstellt, warum ist das und wie kann ich es beheben?

aktualisieren

Ich habe so etwas wie dies versucht, aber ich bekomme Tisch undefined:

var tableTemplate = require('../../templates/table.handlebars'); 

var createHtml = function(data) { 
    console.log(data); 

    table += tableTemplate({ 
     avatar_url: data.owner.avatar_url, 
     full_name: data.full_name, 
     homepage: data.homepage, 
    score: data.score 
    }); 
} 

export function createTable(repositories, page) { 
    var itemsPerPage = 20, 
     offset = page*20; 

    table = document.querySelector('#table'); 
    table.innerHTML = ''; 

    repositories.slice(offset, offset+itemsPerPage).forEach(createHtml); 
} 

Answer 1

Sie den HTML-Code zu ersetzen für jede Iteration mit innerHTML-, den HTML-Code aus der vorherigen Iteration zu verlieren. Verketten Sie alle Zeichenfolgen und legen Sie innerHTML einmal außerhalb von forEach fest. Eine bessere Option (nur lokale Variablen verwenden) ist die Verwendung von Array#map und Array#join.

var tableTemplate = require('../../templates/table.handlebars'); 

document.querySelector('#table').innerHTML = array.map(function(data) { 
    return tableTemplate({ 
     avatar: data.owner.avatar_url, 
     name: data.full_name, 
     homepage: data.homepage, 
     score: data.score 
    }); 
}).join('');