Home Loop through an array of objects and display the objects within a html/css defined table

Questions

Loop through an array of objects and display the objects within a html/css defined table

October 4, 2022

i have an array of objects that should correspond with a table created using html tables and css.

i need the information inside the array of objects to appear in the table whenever i add a new object to the array.

as i understand it, it will require a loop that will iterate through the array of objects and display it within the table and also hold all the established css styling but im not sure how to do that.

function Book(name, author, ReadOrNot) {
    this.name = name
    this.author = author
    ReadOrNot = ReadOrNot
}

const book1 = new Book("The Hobbit", "J.R.R Tolkien", "Read")
const book2 = new Book("A game of thrones", "George R.R. Martin", "Not read")

let myLibrary = []

function addBookToLibrary(...arr) {
 myLibrary.push(...arr)
}

addBookToLibrary(book1)
addBookToLibrary(book2)

*{
    box-sizing: border-box;
    --darkblue: #465c6b;
    --blue: #779bb3;
    --lightgrey: rgb(244, 242, 242);
}


table{
    border-collapse: collapse;
    width: 30em;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0px 10px 30px 5px rgba(0,0,0,.15);
    margin: 100px auto;
    
}

table thead td{
    background-color: rgb(38, 36, 36);
    color: whitesmoke;
    border-bottom: .5px solid black;
    font-size: 15px;
    letter-spacing: 1px;
    padding: 8px;
    
}

table tbody td {
    padding: 8px;
    
}

table tbody tr td:nth-child(4){
    text-align: center;
}

table tbody tr td:nth-child(3){
    text-align: center;
}

table thead tr td:nth-child(3){
    text-align: center;
}

table td{
    font-size: 18px;
    color: rgb(38, 36, 36);
}

.btn.delbtn{
    background-color: #990026;
    min-width: 100px;
    
}

.delbtn:hover{
    background-color: #ec0e46;
    transition: 0.7s;
    cursor: pointer;
}

.btn{
    border-radius: 4px;
    font-weight: 1000;
    font-size: 1rem;
    background-color: var(--darkblue);
    color: aliceblue;
    border: none;
    letter-spacing: 0.7px;
    padding: 10px 20px 10px 20px;
    min-width: 110px;
   
}

.rdbtn:hover{
    cursor: pointer;
    background-color: var(--blue);
    transition: 0.7s;
}

.submit-btn {
    border-radius: 4px;
    font-weight: 500;
    font-size: 1rem;
    background-color: var(--lightgrey);
    color: var(--darkblue);
    border: none;
    letter-spacing: 0.7px;
    padding: 10px 20px 10px 20px;
    
}

.submit-btn:hover{
    cursor: pointer;
}

 <table>
        <thead>
            <tr>
                <td>Name</td>
                <td>Author</td>
                <td>Status</td>
                <td>      </td>
            </tr>
        </thead>
       
        <tbody>
            <tr>
                <td>The Hobbit</td>
                <td>J.R.R Tolkien</td>
                <td><button id="readbtn" class="btn rdbtn" onclick="toggle()">Read</button></td>
                <td><button class="btn delbtn">Delete</button></td>
            </tr>
        </tbody>
    </table>

>Solution :

A reference for you,pay attention that you need to change ReadOrNot = ReadOrNot to this.ReadOrNot = ReadOrNot in order to get the read status

function Book(name, author, ReadOrNot) {
    this.name = name
    this.author = author
    this.ReadOrNot = ReadOrNot
}

const book1 = new Book("The Hobbit", "J.R.R Tolkien", "Read")
const book2 = new Book("A game of thrones", "George R.R. Martin", "Not read")

let myLibrary = []

function addBookToLibrary(...arr) {
  myLibrary.push(...arr)
}

addBookToLibrary(book1)
addBookToLibrary(book2)

function addBookToTable(){
  let tbody = document.querySelector('tbody')
  myLibrary.forEach(b =>{
    let tr = document.createElement('tr')
    let content = '<td>' + b.name + '</td><td>' + b.author + '</td>'
    if(b.ReadOrNot == 'Read'){
      content += '<td><button id="readbtn" class="btn rdbtn" onclick="toggle()">Read</button></td>'  
     }else{
       content += '<td></td>'
     }
     content += '<td><button class="btn delbtn">Delete</button></td>'
    tr.innerHTML = content
    tbody.appendChild(tr)
   })
}

addBookToTable()

*{
    box-sizing: border-box;
    --darkblue: #465c6b;
    --blue: #779bb3;
    --lightgrey: rgb(244, 242, 242);
}


table{
    border-collapse: collapse;
    width: 30em;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0px 10px 30px 5px rgba(0,0,0,.15);
    margin: 100px auto;
    
}

table thead td{
    background-color: rgb(38, 36, 36);
    color: whitesmoke;
    border-bottom: .5px solid black;
    font-size: 15px;
    letter-spacing: 1px;
    padding: 8px;
    
}

table tbody td {
    padding: 8px;
    
}

table tbody tr td:nth-child(4){
    text-align: center;
}

table tbody tr td:nth-child(3){
    text-align: center;
}

table thead tr td:nth-child(3){
    text-align: center;
}

table td{
    font-size: 18px;
    color: rgb(38, 36, 36);
}

.btn.delbtn{
    background-color: #990026;
    min-width: 100px;
    
}

.delbtn:hover{
    background-color: #ec0e46;
    transition: 0.7s;
    cursor: pointer;
}

.btn{
    border-radius: 4px;
    font-weight: 1000;
    font-size: 1rem;
    background-color: var(--darkblue);
    color: aliceblue;
    border: none;
    letter-spacing: 0.7px;
    padding: 10px 20px 10px 20px;
    min-width: 110px;
   
}

.rdbtn:hover{
    cursor: pointer;
    background-color: var(--blue);
    transition: 0.7s;
}

.submit-btn {
    border-radius: 4px;
    font-weight: 500;
    font-size: 1rem;
    background-color: var(--lightgrey);
    color: var(--darkblue);
    border: none;
    letter-spacing: 0.7px;
    padding: 10px 20px 10px 20px;
    
}

.submit-btn:hover{
    cursor: pointer;
}

<table>
        <thead>
            <tr>
                <td>Name</td>
                <td>Author</td>
                <td>Status</td>
                <td>      </td>
            </tr>
        </thead>
       
        <tbody>
            <tr>
                <td>The Hobbit</td>
                <td>J.R.R Tolkien</td>
                <td><button id="readbtn" class="btn rdbtn" onclick="toggle()">Read</button></td>
                <td><button class="btn delbtn">Delete</button></td>
            </tr>
        </tbody>
    </table>