I have an dynamic innerHTML in which we have to show the dynamic data but issue is that every value is visible but table td values not showing its showing undefined value,can anybody help how to get inside td tag?
viewDynamicHTML(){
return `<div class="form-tab" id="OrderDetailsPage">
<div class="form-group">
<div class="col-md-5">
<b>PO#</b>:<p>${this.salesOrderModel.CustomerRefNo}</p>
</div>
<div class="col-md-5" style="float:right;">
<b>SO#</b>:<p>${this.salesOrderModel.ERPSalesOrderKey}</p>
</div>
</div>
</div>
<table class="table" border="1" cellspacing="5" cellpadding="5">
<thead>
<tr>
<th>Item</th>
<th width="50%">Description</th>
<th>Quantity</th>
<th>Unit</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tbody id="tableBody">
${this.renderTableTd()}
</tbody>
</table>
}
renderTableTd(){
const tableData = this.salesOrderModel.SalesOrderItemList.map((data)=>{
return (
`<tr>
<td>${data.ERPItemKey}</td>
<td>${data.ItemName}</td>
<td>${data.Quantity}</td>
<td>${data.QuantityUnit}</td>
<td>${data.UnitPrice}</td>
<td>${data.UnitPrice * data.Quantity}</td>
</tr>`
);
})
}FieldName: "<div class=\"form-tab\" id=\"OrderDetailsPage\">\n <div class=\"print-area\">\n <div class=\"form-group\">\n <div class=\"col-md-12\"><span class=\"page-name\">Web Order</span></div>\n <div class=\"col-md-12\"> <div class=\"divider\"></div><br> </div>\n </div>\n <div class=\"form-group\">\n <div class=\"col-md-12\">\n <div class=\"logo-img\"> \n <img *ngIf=\"${this.businessLogoUrl} && ${this.businessLogoUrl} != '\" src=\"${this.businessLogoUrl}\" />\n \n </div>\n <div class=\"business-name\"> ${this.tenantName}</div><br>\n <div class=\"form-group\" style=\"margin-left: 70px;\"> \n <div class=\"col-md-12\">\n ${this.salesOrderModel.BusinessAddress} \n </div>\n </div>\n <div class=\"form-group\" style=\"margin-left: 70px;\">\n <div class=\"col-md-12\"> \n ${this.salesOrderModel.BusinessContactNo}\n </div> \n </div>\n </div>\n </div> <hr>\n <div class=\"form-group\">\n <div class=\"col-md-12\"></div>\n </div>\n <div class=\"form-group\">\n <div class=\"col-md-5\" style=\"float:right;\">\n <b>Ship To</b>\n :${this.salesOrderModel.CustomerName}<span *ngIf=\"${this.salesOrderModel.ShipToKey}\">,${this.salesOrderModel.ShipToKey}</span>\n <p>${this.salesOrderModel.ShipToAddress}</p>\n </div>\n <div class=\"col-md-5\" >\n <b>Bill To</b>:${this.salesOrderModel.CustomerName}<p>${this.salesOrderModel.BillToAddress }</p>\n </div>\n </div>\n <div class=\"form-group\">\n <div class=\"col-md-12\"></div>\n </div>\n <div class=\"form-group\">\n <div class=\"col-md-5\">\n <b>PO#</b>:<p>${this.salesOrderModel.CustomerRefNo}</p>\n </div>\n <div class=\"col-md-5\" style=\"float:right;\">\n <b>SO#</b>:<p>${this.salesOrderModel.ERPSalesOrderKey}</p>\n </div>\n </div>\n <div class=\"form-group\">\n <div class=\"col-md-12\"></div>\n </div>\n <div class=\"form-group\">\n <div class=\"col-md-5\">\n <b>Order Date</b>:<p>${this.salesOrderModel.PostingDate}</p>\n </div>\n <div class=\"col-md-5\" style=\"float:right;\">\n <b>Requested Date</b>:<p>${this.salesOrderModel.DeliveryDate}</p>\n </div>\n </div> \n <table class=\"table\" border=\"1\" cellspacing=\"5\" cellpadding=\"5\">\n <thead>\n <tr>\n <th>Item</th>\n <th width=\"50%\">Description</th>\n <th>Quantity</th>\n <th>Unit</th>\n <th>Price</th>\n <th>Total</th>\n </tr>\n </thead>\n <tbody id=\"tableBody\">\n ${this.renderDynamicColoumsValue()}\n </tbody>\n </table>\n <div class=\"form-group\">\n <div class=\"col-md-12\"></div>\n </div>\n <hr>\n <div class=\"form-group\">\n <div class=\"col-md-4\" *ngIf=\"${this.totalAmount>0}\">\n <b>Total Quantity</b>: <p>${this.totalQuantity}</p>\n </div>\n <div class=\"col-md-4\" style=\"float:right;\" *ngIf=\"${this.totalAmount>0}\">\n <b>Total Amount</b>:<p>${this.totalAmount}</p>\n </div>\n </div>\n <div class=\"form-group\">\n <div class=\"col-md-12\"> <span class=\"sub-title\"><h3>Remarks</h3></span></div>\n </div>\n <div class=\"form-group\">\n <div class=\"col-md-12\">\n ${this.salesOrderModel.Remarks}\n </div>\n </div>\n </div>\n </div>\n"You're appointing your constant, but then you're not returning it. At the moment the renderTableTd() has a return type of void. The IDE would've helped you if you would mention the return type you expected.
renderTableTd(){
const tableData = this.salesOrderModel.SalesOrderItemList.map((data)=>{
return (
`<tr>
<td>${data.ERPItemKey}</td>
<td>${data.ItemName}</td>
<td>${data.Quantity}</td>
<td>${data.QuantityUnit}</td>
<td>${data.UnitPrice}</td>
<td>${data.UnitPrice * data.Quantity}</td>
</tr>`
);
});
return tableData; // <---try this
}