How replacewith table row by jquery

September 21, 2022

i have already a table

 <tbody class="sellbook">
                                <tr class="foobar-26">
                                       <td>price</td>
                                       <td>amount</td>
                                       <td>total</td>
                               </tr>
                             <tr class="foobar-27">
                                       <td>price</td>
                                       <td>amount</td>
                                       <td>total</td>
                               </tr>
                             <tr class="foobar-28">
                                       <td>price</td>
                                       <td>amount</td>
                                       <td>total</td>
                               </tr>
                                    </tbody>

need to be replace all table rows with new updated data,
example as follow data

message: Array(11) [ {…}, {…}, {…}, … ]

0: Object { id: 97, user_id: 1, price: 1, … }

1: Object { id: 98, user_id: 2, price: 1, … }

2: Object { id: 101, user_id: 2, price: 1, … }

3: Object { id: 104, user_id: 2, price: 1, … }

whenever I repalceWith() jquery function , it show undefined
i not know why?

 $('tbody.sellbook').replaceWith('<tr class="foobar-' + e.message.id + '">\
                                         <td class="red-bg-100">'+e.message.price+'</td>\
                                         <td class="pink-bg-90">'+e.message.amount+'</td>\
                                         <td class="white-bg-70">'+e.message.total+'</td>\
                                         </tr>');

I am sure data are pass .why always show undefined .
something need to replaceWith table row ?
remove first ? and append?

>Solution :

so, in your data i dont see message attribute
so 1st: maybe you need to use e.price instead of e.message.price
and 2nd: you should loop your data and foreach row yo create a new row
something like

$('tbody.sellbook').replaceWith(message.map(e=>'<tr class="foobar-' + e.id + '">\
                                         <td class="red-bg-100">'+e.price+'</td>\
                                         <td class="pink-bg-90">'+e.amount+'</td>\
                                         <td class="white-bg-70">'+e.total+'</td>\
                                         </tr>').joint(''));

so you need to map your array => this map will return an array of tags
this array you’ll join it tou return the html
hope this helpful for you
`