Как получить массив Json из ресурса API и привязать его к файлу лезвия, используя Jquery ajax в laravel?

Question

Я новичок в laravel и jquery.

Я получил данные из ресурса API, он вернул JSON ответ .

Я хочу, чтобы данные были привязаны к файлу лезвия через jquery ajax ..

Вот мой код с нуля.

1. Я создал таблицу с именем Прогресс с 5 полями

id
name
description
goal
value

2. Модель: App \ Progress. php

class Progress extends Model
{
     protected $table = 'progress';
     protected $fillable = [
        'id', 'name', 'goal', 'description', 'value'
    ];
    public $timestamps = false;
}

Контроллер: app / Http / Controllers / api / ProgressController. php

<?php

namespace App\Http\Controllers\Api;
use App\Progress;
use App\Http\Controllers\Controller;
use App\Http\Resources\ProgressResource;
use Illuminate\Http\Request;

class ProgressController extends Controller
{
    public function index()
    {
      return ProgressResource::collection(Progress::paginate(4));
      
}
}

4.Ресурсы: app / http / Resources / ProgressResource . php

public function toArray($request)
    {
        return[
         'id' => $this->id,
         'name' => $this->name,
         'goal' => $this->goal,
         'description' => $this->description,
         'value' => $this->value,
  ];
    }

5.Файл лезвия: Welcome.blade. php

@foreach($progress as $progressdata)
        <div class="col-md-4">
             <div class = "progress">
                 <div id = "goal"> {{ $progressdata->goal }} </div>
                 <div id = "value"> {{ $progressdata->value}} </div>
              </div>
         </div>
    </div>
 @endforeach

6. JS файл: main. js

$(document).ready(function(){

  $.ajaxSetup({

        headers: {

            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }

    });
       var progress = [];
      $.ajax({
          type: "GET",
          url: "/api/progress",
          data: {progress:progress},
          success: function(data){
            console.log(data);
           }
        });
});

7. Файл маршрутизации: web. php

Route::view('/', 'welcome');

Я получил эту ошибку

GET http://sampleprogresswidget.test/ 500 (Internal Server Error)

Как связать массив данных из коллекции ресурсов в файле лезвия через jquery ajax. Может кто-нибудь помочь?

Answer 1

вы должны вернуть json ответ, подобный этому

return response()->json([
'name' => 'Abigail',
'state' => 'CA',
 ]);