How to bind the value from an array from api to a blade file using jquery ajax?

I have created a application , where i have to fetch the data from the API resources in laravel. My question is how to bind the values in an array in the blade file through jquery ajax..

I have a table named Progress with 5 fields.. I want to bind the 2 field in my blade file , namely value and goal.

Blade file: welcome.blade.php

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

Controller: api/ProgressController:

<?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 getValues(Request $request)
    {
      if($request->ajax()){
      $progress = ProgressResource::collection(Progress::paginate(4));
      return Response($progress);
      }

}
}

Routes: web.php

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

main.js

$(document).ready(function(){

  $.ajaxSetup({

        headers: {

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

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

The problem is am recieving an error ..

Facade\Ignition\Exceptions\ViewException
Undefined variable: progress 
**Possible typo $progress**

Could someone please help to solve this issue.

Thanks

via Chebli Mohamed