Retrieve JSON Object List from Ajax in Laravel Framework

Download and install the latest version of Composer from https://getcomposer.org/download/
Open Windows Terminal in Visual Studio Code install Laravel Installer with command as below:
```
composer global require laravel/installer
```
Create new folder named LearnLaravelWithRealApps. Use Visual Studio Code open to LearnLaravelWithRealApps foler. In this folder, create new project named LearnLaravelWithRealApps with command as below:
```
laravel new LearnLaravelWithRealApps
```
Run LearnLaravelWithRealApps project with command as below:
```
php artisan serve
```
Open LearnLaravelWithRealApps project with url as below:
```
http://localhost:8000
```

Create new folder named js in public folder. Copy JQuery library to public/js folder.

Create new PHP file named Product.php in app/Models folder as below:

<?php

namespace App\Models;

class Product
{
    var $id;
    var $name;
    var $price;
    var $quantity;
    var $photo;

    function __construct($id, $name, $price, $quantity, $photo)
    {
        $this->id = $id;
        $this->name = $name;
        $this->price = $price;
        $this->quantity = $quantity;
        $this->photo = $photo;
    }
}

Create new PHP file named DemoController.php in app/Http/Controllers folder as below:

<?php

namespace App\Http\Controllers;

use App\Models\Product;

class DemoController extends Controller
{
	public function index()
	{
		return view('demo/index');
	}

	public function ajax()
	{
		$products = array(
			new Product('p01', 'Name 1', 4.5),
			new Product('p02', 'Name 2', 5.6),
			new Product('p03', 'Name 3', 8.5)
		);
		return response()->json($products);
	}
}

Create new folder named demo in resources/views folder. In this folder, create new Blade file named index.blade.php as below:

<html>

	<head>
		<title>Laravel</title>
		<script src="{{asset('js/jquery-3.6.0.min.js')}}" type="text/javascript"></script>
		<script>
			$(document).ready(function() {

				$('#buttonDemoAjax').on('click', function() {
					$.ajax({
						type: 'GET',
						url: "{{url('/demo/ajax')}}",
						success: function(products) {
							var result = '';
							for(var i = 0; i < products.length; i++) {
								result += '<br>id: ' + products[i].id;
								result += '<br>name: ' + products[i].name;
								result += '<br>price: ' + products[i].price;
								result += '<br>-------------------';
							}
							$('#result').html(result);
						}
					});
				});

			});
		</script>

	</head>

	<body>

		<h3>Index</h3>
		<input type="button" value="Demo Ajax" id="buttonDemoAjax">
		<br>
		<span id="result"></span>

	</body>

</html>

Open web.php file in routes folder, add new routes as below:

<?php
				
use Illuminate\Support\Facades\Route;

use App\Http\Controllers\DemoController;

Route::group([], function () {
	Route::get('/', [DemoController::class, 'index']);
	Route::get('/demo', [DemoController::class, 'index']);
	Route::get('/demo/index', [DemoController::class, 'index']);
	Route::get('/demo/ajax', [DemoController::class, 'ajax']);
});

Access index action in Demo controller with urls as below:

http://localhost:8000
http://localhost:8000/demo
http://localhost:8000/demo/index

Output

Click Demo Ajax button to call Ajax

Retrieve JSON Object List from Ajax in Laravel Framework

Install Laravel

Add JQuery Library

Models

Create Controller

Create View

Create Routes

Structure of Laravel Project

Run Application