JQuery Iterate through JSON and print into html

user_16695624 0
Viewed 19

I have a JSON list, which can have an array of "OrderLines" , within this array is other data such as part number, price etc...

I want to be able to print/display each "OrderLine" and its data in some HTML elements/tags, for each order-line the HTML elements are to be repeated, meaning I don't want e.g. all Part-Numbers to be in the SAME div tag, hopefully the code below will make sense as to what I want to achieve

    {
        "Depot": 4,
        "DocumentType": "Sales Order",
        "DocumentNumber": "123",
        "OrderDate": "2022-06-23T09:09:12+01:00",
        "OrderReference": "TEST",
        "OrderedBy": "",
        "ContactName": "",
        "AccountCode": "EXAMPLE",
        "CustomerName": "EXAMPLE",
        "CustomerAddress1": "EXAMPLE",
        "CustomerAddress2": "EXAMPLE",
        "CustomerAddress3": "EXAMPLE",
        "CustomerAddress4": "EXAMPLE",
        "DepotVATNumber": "GB EXAMPLE",
        "DeliveryName": "EXAMPLE",
        "DeliveryAddress1": "EXAMPLE",
        "DeliveryAddress2": "EXAMPLE",
        "DeliveryAddress3": "EXAMPLE",
        "DeliveryAddress4": "EXAMPLE",
        "OrderLines": [
            {
                "PartNumber": "EXAMPLE",
                "Description": "EXAMPLE",
                "IncludeCostCodes": false,
                "MaterialCode": "0",
                "CostCentre": "",
                "Quantity": 2,
                "Price": 9.5,
                "TotalAmount": 19,
                "VATRate": 20
            }
{
                "PartNumber": "EXAMPLE 2",
                "Description": "EXAMPLE 2",
                "IncludeCostCodes": false,
                "MaterialCode": "0",
                "CostCentre": "",
                "Quantity": 0,
                "Price": 0,
                "TotalAmount": 0,
                "VATRate": 0
            }
        ],
        "TotalGoods": 19,
        "TotalVat": 3.8,
        "GrandTotal": 22.8
    }

JQuery

<script>
    let order = @Html.Raw(Model.Content);
    $('.billaddN').text(order.CustomerName + "," );
    $('.billadd1').text(order.CustomerAddress1 + "," );
    $('.billadd2').text(order.CustomerAddress2 + "," );
    $('.billadd3').text(order.CustomerAddress3 + "," );
    $('.billadd4').text(order.CustomerAddress4);
    $('.shippadd1').text(order.DeliveryAddress1 + "," );
    $('.shippadd2').text(order.DeliveryAddress2 + "," );
    $('.shippadd3').text(order.DeliveryAddress3 + "," );
    $('.shippadd4').text(order.DeliveryAddress4);
    $('.shippaddN').text(order.DeliveryName + "," );
    $('.ordRef').text(order.OrderReference);
    $('.ordNo').text(order.DocumentNumber);
    $('.ordDate').text(order.OrderDate);
    $('.ordBy').text(order.OrderedBy);
    $('.subtotal').text("£" + order.TotalGoods);
    $('.totalvat').text("£" + order.TotalVat);
    $('.total').text("£" + order.GrandTotal);
    $('.vatNo').text(order.DepotVATNumber);
    $('.accountNo').text(order.AccountCode);

    
    $(order.OrderLines).each(function(i,e) {
                                    $(".order-lines-container").append(
                                            '<tr>
                                                <td width="80%">
                                                <span class="font-weight-bold">order.PartNumber[i]</span>
                                                <div class="product-qty">
                                                    <span class="d-block">order.Description[i]</span>
                                                    <span>Color</span>
                                                </div>
                                            </td>
                                            <td width="20%">
                                                <div class="text-right">
                                                    <span class="font-weight-bold">order.Price[i]</span>
                                                </div>
                                            </td>
                                        </tr>'
                                
                                    )});

</script>
arrays loops jquery json javascript
1 Answers

Your code is almost there, the issue you have is that your each() loop doesn't reference the specific line in the array you're iterating through.

In addition, the looping code can be simplified and made more performant by using map() to create an array of strings which you then append to the DOM just once.

Here's a working example:

var order = {Depot:4,DocumentType:"Sales Order",DocumentNumber:"123",OrderDate:"2022-06-23T09:09:12+01:00",OrderReference:"TEST",OrderedBy:"",ContactName:"",AccountCode:"EXAMPLE",CustomerName:"EXAMPLE",CustomerAddress1:"EXAMPLE",CustomerAddress2:"EXAMPLE",CustomerAddress3:"EXAMPLE",CustomerAddress4:"EXAMPLE",DepotVATNumber:"GB EXAMPLE",DeliveryName:"EXAMPLE",DeliveryAddress1:"EXAMPLE",DeliveryAddress2:"EXAMPLE",DeliveryAddress3:"EXAMPLE",DeliveryAddress4:"EXAMPLE",OrderLines:[{PartNumber:"EXAMPLE",Description:"EXAMPLE",IncludeCostCodes:!1,MaterialCode:"0",CostCentre:"",Quantity:2,Price:9.5,TotalAmount:19,VATRate:20},{PartNumber:"EXAMPLE 2",Description:"EXAMPLE 2",IncludeCostCodes:!1,MaterialCode:"0",CostCentre:"",Quantity:0,Price:0,TotalAmount:0,VATRate:0}],TotalGoods:19,TotalVat:3.8,GrandTotal:22.8}

let rows = order.OrderLines.map(line => `
  <tr>
      <td width="80%">
        <span class="font-weight-bold">${line.PartNumber}</span>
        <div class="product-qty">
          <span class="d-block">${line.Description}</span>
          <span>Color</span>
        </div>
    </td>
    <td width="20%">
      <div class="text-right">
        <span class="font-weight-bold">${line.Price}</span>
      </div>
    </td>
  </tr>`);
  
$(".order-lines-container").append(rows);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<table class="order-lines-container"></table>

user_5194130
Related