Passing object as a parameter in static function in js

Question

I am trying to pass new object as parameter in static function but i getting unexpected result. Here is my code. But i want to show table row with title name, author name and isbn. So help to resolve this problem.

    let bookTitle = document.querySelector("#title").value;
    let bookAuthor = document.querySelector("#author").value;
    let bookIsbn = document.querySelector("#isbn").value;
    
    class Book {
      constructor(title, author, isbn) {
        this.title = title;
        this.author = author;
        this.isbn = isbn;
      }
    }
    
    const makeNewBook = new Book(bookTitle, bookAuthor, bookIsbn);
    
    class MakeUi {
      static addTable(makeNewBook) {
        document.querySelector("#book-list").innerHTML = `<tr> 
                <td>  ${title} </td>
                <td>  ${author} </td>
                <td>  ${isbn} </td>
                <td>  <button class="btn btn-sm btn-danger"> X </button> </td>
           </tr>`;
      }
    }
    
    MakeUi.addTable();

This is the result i am getting.

Clarity · Accepted Answer · 2019-10-04 06:50:52Z

2

You need to get the values from the object first:

class MakeUi {
  static addTable(newBook) {
    const { title, author, isbn } = newBook; // Get the values from the object
    document.querySelector("#book-list").innerHTML = `<tr> 
                <td>  ${title} </td>
                <td>  ${author} </td>
                <td>  ${isbn} </td>
                <td>  <button class="btn btn-sm btn-danger"> X </button> </td>
           </tr>`;
  }
}

MakeUi.addTable(makeNewBook);

edited Oct 4, 2019 at 6:50

answered Oct 4, 2019 at 6:41

Clarity

10.9k2 gold badges27 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Soc Over a year ago

I would change the method signature from addTable(makeNewBook) to addTable(book) to avoid confusion.

Radonirina Maminiaina · Accepted Answer · 2019-10-04 06:41:24Z

You need to destructurate your addTable(makeNewBook):

const makeNewBook = new Book(bookTitle, bookAuthor, bookIsbn);

class MakeUi {
  static addTable({title, author, isbn}) {
    document.querySelector("#book-list").innerHTML = `<tr> 
            <td>  ${title} </td>
            <td>  ${author} </td>
            <td>  ${isbn} </td>
            <td>  <button class="btn btn-sm btn-danger"> X </button> </td>
       </tr>`;
  }
}

Then, pass your const makeNewBook into your MakeUi:

MakeUi.addTable(makeNewBook);

Or: access property correctly, like the following code:

class MakeUi {
      static addTable() {
        document.querySelector("#book-list").innerHTML = `<tr> 
                <td>  ${makeNewBook.title} </td>
                <td>  ${makeNewBook.author} </td>
                <td>  ${makeNewBook.isbn} </td>
                <td>  <button class="btn btn-sm btn-danger"> X </button> </td>
           </tr>`;
      }
    }

Or even better

const {title, author, isbn} = new Book(bookTitle, bookAuthor, bookIsbn);
class MakeUi {
      static addTable() {
        document.querySelector("#book-list").innerHTML = `<tr> 
                <td>  ${title} </td>
                <td>  ${author} </td>
                <td>  ${isbn} </td>
                <td>  <button class="btn btn-sm btn-danger"> X </button> </td>
           </tr>`;
      }
    }

    MakeUi.addTable();

Collectives™ on Stack Overflow

Passing object as a parameter in static function in js

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related