Как я могу отправить данные массива от контроллера к блейду и получить доступ к данным в переменной javascript

Question

Я работаю с Laravel 6. У меня есть контроллер, где данные собираются после отправки формы, из собранных данных я хочу использовать некоторые данные для отправки их на другую страницу, где можно было бы собирать платеж.

вот мой код

//data collected from form for storing in database and sending to payment gateway
public function store()  
{
    $user = auth()->user();
    $amount = 1200;
    $orderid = time() . '-' . $user->id;

    auth()->user()->details()->create([
        'name' => $data['name'],
        'orderID' => $orderid,
        'reptype' => $data['reptype'],
        'gender' => $data['gender'],
        'email' => $data['email'],
        'phone' => $data['phone'],
    ]);

    $api = new Api(config('app.razorpay'), config('app.razorsecret'));

    $orderData = [
        'receipt'         => $orderid,
        'amount'          => $amount, // 2000 rupees in paise
        'currency'        => 'INR',
        'payment_capture' => 1 // auto capture
    ];

    //create a new order id on payment gateway
    $razorpayOrder = $api->order->create($orderData);

    //collect order ID
    $razorpayOrderId = $razorpayOrder['id'];

    //data to be sent for payment collection
    $pay = [       
        "amount"            => $amount,
        "name"              => "test name",
        "description"       => "",
        "image"             => "https://s29.postimg.org/r6dj1g85z/daft_punk.jpg",
        "prefill"           => [
            "name"              => "Daft Punk",
            "email"             => "customer@merchant.com",
            "contact"           => "9999999999",
        ],
        "notes"             => [
            "address"           => "Hello World",
            "merchant_order_id" => $orderid,   //order id which I have generated
        ],
        "order_id"          => $razorpayOrderId,  //order id provided by gateway
    ];

        return redirect()->route( 'pay')->with($pay);  // I would like to send data from this redirect to a blade where I can initiate payment process.
}

Моя проблема в том, что я хочу отправить $pay данные массива на маршрут pay, где данные массива $pay должны быть доступны для java код скрипта. когда я пытаюсь это сделать, я получаю сообщение о том, что переменная недоступна.

Answer 1

Два способа вы можете go об этом:

1. Вывод переменной.

// in your blade file
<script>
let pay = JSON.parse('{{ @json($pay) }}');
</script>

Проблема этого подхода заключается в том, что он может использоваться только внутри блейд-файла и зависит от того, вы создаете экземпляр pay до того, как он будет использован где-то еще.

2 Использование атрибута, атрибута data- * или скрытого ввода для хранения данных и последующего их извлечения.

<!-- hidden input value example -->
<input id="pay-data" type="hidden" value='@json($pay)'>
<!-- attribute example -->
<span id="pay-data" type="hidden" someattribute='@json($pay)' style="display:none;"></span>
<!-- data-* attribute example -->
<span id="pay-data" type="hidden" data-payment='@json($pay)' style="display:none;"></span>

Важно использовать одинарные кавычки ('). Не используйте двойные кавычки (") с помощником @json.

// vanilla js - value example
let pay = JSON.parse(document.getElementById('pay-data').value);
// jquery - value example
let pay = JSON.parse($('#pay-data').val());
// vanilla js - attribute example
let pay = JSON.parse(document.getElementById('pay-data').getAttribute('someattribute'));
// jquery - attribute example
let pay = JSON.parse($('#pay-data').attr('someattribute'));
// vanilla js - data-* attribute example
let pay = JSON.parse(document.getElementById('pay-data').dataset.payment);
// jquery - data-* attribute example
let pay = JSON.parse($('#pay-data').data('payment'));

У такого подхода есть и обратная сторона. Данные json предоставляются любому, кто хочет изучить html code.

3 Получение данных с помощью вызова ajax.

Лично я предпочитаю вариант 2 или 3, потому что мне не нравится смешивать мой JS с моими блейд-файлами .