php - Accessing / reading nested data in html

Question

I apologize if this question has been answered often before but i'v been stuck on this simple problem for a while now, so here goes.

I'm working on a php vue project where I am displaying some data in html.

I have a Order object which contains the id, customer, date etc. Within a order there is a product object which contains fields like price name etc. I want to display the amount field from product. Is there any simple way to do this is html?

My Order object:

$order = new Order(
            $pOrder->id,
            $pOrder->deliveryName,
            $pOrder->deliveryContactName,
            $pOrder->deliveryAddress,
            $pOrder->deliveryZipcode,
            $pOrder->deliveryCity,
            $pOrder->deliveryCountry,
            $pOrder->invoiceName,
            $pOrder->invoiceContactName,
            $pOrder->invoiceAddress,
            $pOrder->invoiceZipcode,
            $pOrder->invoiceCity,
            $pOrder->invoiceCountry,
            $pOrder->emailAddress,
            $pOrder->phoneNumber,
            $pOrder->createdAt,
            $pOrder->calculateVAT,
            $products,
            $productTags,
            null

My Product object:

$product = new Product(
                $orderProduct->id,
                $orderProduct->name,
                $orderProduct->price,
                $orderProduct->amount,
                $orderProduct->weight,
                $tags

My HTML code:

<tr v-for="(order, index) in orders"
                            v-bind:class="index % 2 === 0 ? 'bg-white' : 'bg-gray-50'">
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                {{order.id}}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                {{order.deliveryName}}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                {{order.createdAt}}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                {{order.products}}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                € 150
                            </td>
                        </tr>

question from:https://stackoverflow.com/questions/65886872/accessing-reading-nested-data-in-html

Answer 1

As the products is an array you need a for loop to iterate over it

    <tr v-for="(order, index) in orders"
                            v-bind:class="index % 2 === 0 ? 'bg-white' : 'bg-gray-50'">
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                {{order.id}}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                {{order.deliveryName}}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                {{order.createdAt}}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">

<!-- for loop to iterate over it -->
                               <span v-for="(product, index) in order.products">
                                  {{product.price}}
</span>



                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                € 150
                            </td>
                        </tr>