Nested array value not showing in the innerHTML table td section in angular?

Question

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"

did you forget to put a ` after </table> ? in your snippet it seems you did, so the function would just be rendered as an HTML string? — James D
– James D, Commented Apr 18, 2022 at 10:09
In the renderTableTd function it looks like your appointing you const tableData to a string value, and then do nothing... Return the const value in the function, and it should work — James D
– James D, Commented Apr 18, 2022 at 10:11

James D · Accepted Answer · 2022-04-18 10:20:01Z

1

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
  }

edited Apr 18, 2022 at 10:20

answered Apr 18, 2022 at 10:14

James D

2,3513 gold badges21 silver badges33 bronze badges

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

4 Comments

Kapil Soni Over a year ago

sir today i returned innerHTML from API side but its not render our data its showing same string like -${this.salesOrderModel.BusinessAddress}.can you tell m why its not working that case. check my udpated fiddle?

James D Over a year ago

in the fiddle ${this.businessLogoUrl} != '\" src=\"${this.businessLogoUrl}\" is missing a '

James D Over a year ago

it's easier to just make a new question because you are now merging 2 separate questions into one and changing the required answer, which is not the way to work with StackOverflow. An edit to improve your question is okay, a new separate question is not.

Kapil Soni Over a year ago

ok will update new question

Collectives™ on Stack Overflow

Nested array value not showing in the innerHTML table td section in angular?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related