我想将数据提取到javascript代码中？

我是新来laravel的，我想把数据库中的数据提取到脚本代码中，但不幸的是，我不知道怎么做，请大家有什么想法请帮助我谢谢

请检查这里的图片

这里的响应

[
  {
    "id": 160,
    "year": 2020,
    "name": "Mazhab e Islam ki Mubarak 
       Taleemaat",
    "audio_file": null,
    "slug": null,
    "downloads": null,
    "date": "2020-06-08",
    "type": 5,
    "sort": null,
    "status": 1,
    "created_at": "2020-10-20T17:37:59.000000Z",
    "updated_at": "2020-10-20T17:43:13.000000Z"
  }
]

控制器

  public function fridaySermon()
        {
    
            $data = [
    
                'fridaySermons' => Audio::where('type', 5)->get(),
    
            ];
            return view('friday-sermon', $data);
        }

脚本

 // initialize playlist and controls
        var index = 0,
            playing = false,
            mediaPath = '{{url('')}}/assets/friday-sermon/',
            extension = '',
            tracks = [
                     // get data here 
                {
                "track": "<i class='fa fa-headphones'></i>",
                "name": " <span class='playerTitle'>Title:</span> Mazhab e Islam ki Mubarak Taleemaat <span class='bottomPlyrDcsp'><br> <span><i class='fa fa-calendar'></i> 20-Mar-2020 | <i class='fa fa-clock-o'></i> 20:34 | <i class='fa fa-download'></i> 558</span></span>",
                "duration": " <i class='fa fa-play-circle'></i>",
                "file": "20-mar-2020"
            }],
            buildPlaylist = $.each(tracks, function(key, value) {
                var trackNumber = value.track,
                    trackName = value.name,
                    trackDuration = value.duration;
                if (trackNumber.toString().length === 1) {
                    trackNumber = '0' + trackNumber;
                }
                $('#plList').append('<li> \
                    <div class="plItem"> \
                        <span class="plNum">' + trackNumber + '</span> \
                        <span class="plTitle">' + trackName + '</span> \
                        <span class="plLength">' + trackDuration + '</span> \
                    </div> \
                </li>');

//初始化播放列表和控件
var指数=0，
玩=假，
mediaPath='{url（'''}}}/assets/friday-布道/'，
扩展名=“”，
轨道=[
//在这里获取数据
{
“轨道”：“，
“名称”：“标题：Mazhab e Islam ki Mubarak Taleemaat
2020年3月20日| 20:34 | 558”，
“期间”：“期间”，
“文件”：“2020年3月20日”
}],
buildPlaylist=$。每个（曲目、功能（键、值）{
var trackNumber=value.track，
trackName=value.name，
trackDuration=value.duration；
if（trackNumber.toString（）.length==1）{
trackNumber='0'+trackNumber；
}
$（'#plList'）。追加（'
\
\
“+trackNumber+”\
“+trackName+”\
“+trackDuration+”\
\
(),；

这是一个相当广泛的问题，但实际上，您需要从“前端”（js/jQuery）向“后端”Laravel应用程序发出请求

为此，我建议从前端应用程序使用jsfetchapi（）（如果需要，还有其他方法）

在从Laravel API请求数据之前，后端Laravel API需要配置端点以实际提供所请求的数据。以下是示例教程：

---

有很多这样的教程，所以请随意查找最适合自己的教程。

将这些数据放入tempalte…显示此视图的模板。