es6 Vorlage Zeichenfolge Render-Element basierend auf Endpunktantwort

Question

Ich bin ziemlich neu zu ES6 und Vorlage Literale etc ... und hoffte, einen Rat zu bekommen. Ich habe einen Endpunkt, der mir eine Reihe von Objekten gibt, die ich verwende, um bestimmte Schülerinformationen anzuzeigen. Innerhalb jedes Objekts hat ein Schüler eine Sternbewertung. Lange Rede, kurzer Sinn: Ich möchte die Bewertungszahl, die ich vom Endpunkt zurückbekomme, durchgehen lassen und eine Sternbewertung für die 1-5 Sterne anzeigen. Mein Endpunkt und alles funktioniert gut, aber ich habe Probleme mit der Ausgabe der HTML aus der for-Schleife. Irgendwelche Vorschläge und oder Tipps würden sehr geschätzt werden.

Meine es6 Datei enthält folgende Komponenten:

renderStudentRating = (studentRating) => { 
    let rating = studentRating; 

    for (let i = 0; i <= rating; i ++) { 
    // should output an element based on rating count 
    <i class="student-star"></i> 
    } 
}; 

<span class="student-rating-info"> 
    <div id="rating"> 
    ${renderStudentRating(`${student.rating}`)} 
    </div> 
</span> 

Answer 1

So etwas würde eine Spanne erstellen, die die entsprechende Anzahl der Sterne hat.

renderStudentRating = studentRating => { 
    let output = ''; 
    for (let i = 0; i <= studentRating; i ++) { 
    // should output an element based on rating count 
    output += '<i class="student-star"></i>'; 
    } 
    return output; 
}; 
document.querySelector('.student-rating-container').innerHtml = ` 
    <span class="student-rating-info"> 
     <div id="rating"> 
      ${renderStudentRating(student.rating)} 
     </div> 
    </span> 
`;