Displaying data in JavaScript

I am sending an ID using javascript to backend server. The ID is matched with the table records and the correct data is sent back by the php function to the javascript function which then displays the result. The ID is correctly being sent and the correct answer is being sent to the front end. But, I don't know how to display the data. Following is the function of php.

In this function, the information is being stored in an array. The name, price and chef. This information has to be displayed. I am sending it in json form.

public function showorderdetail(Request $request)
    {
        Log::info("id".$request->orderId);
        $itemsArray = [];
        $orderId = $request->orderId;
        $order = order::where('id', $orderId)->first();
        $itemId = orderitem::where('order_id', $order->id)->get();
        foreach ($itemId as $itemIds)
        {
            $items = item::where('id', $itemIds->item_id)->get();

            foreach ($items as $item)
            {
                $itemsArray[] = [
                    'name' => $item->name,
                    'price' => $item->price,
                    'chef' => $item->chef_id,
                ];
            }

        }
        return json_encode($itemsArray);
    }

Following is the javascript function. In the success part, the data has to be displayed. I don't know the function that should be used or how it is going to be used.

$('.viewOrderDetail').click(function () {
        var orderId = $(this).attr('orderId');
        console.log(orderId);
    $.ajax({
        type: "get",
        url: "{{route('showorderdetail')}}",
        data: {
        orderId: $(this).attr("orderId")
        },
        cache: false,
        success: function (result) {
            console.log(result)
       
            $('#detail').html("<p>" + name + " " + " "+ price +  "</p>");
        }
    });
    });

Please help.