Javascript 选择选项中的Laravel get N level层次结构表下拉列表

我正在使用Laravel7和MySQL后端

我有一个topics表，其中包含id、name和parent列。此处，父项为列Id的外键，表中数据如下：

我正在尝试显示这些主题的名称，如下所示

    fractions 
- fractions > introduction to fractions 
- fractions > introduction to fractions > What are fractions and its purpose? 
- fractions > introduction to fractions > Fractions as division 
- fractions > Representation of fractions 
- fractions > Representation of fractions > How to represent a fraction - Area Models 

下面是我的ajax调用，我将展示所有主题：

function getSubjectsTopics(subject_id)
{
    if(subject_id) {
        loading_show();
    axios.get("/master/topic/get-topic-by-subject-id/" + subject_id)
        .then(function(response) {
            var optionHtml = '<option value="0">Parent</option>';
            if(response.data.status) {
                $.each(response.data.subject_topics, function(i,v) {
                    optionHtml += `<option value="${v.id}">${v.name}</option>`;

                 });

            }
            $("#ddl_topic_type").html(optionHtml).attr('disabled', false).select2();
            loading_hide();
            //console.log(response);
        })
        .catch(function(error) {
            loading_hide();
            console.log(error);
            Swal.fire({
                type: 'error',
                title: 'Oops...',
                text: 'Something went wrong!'
            })
        })
    } else {
        $("#ddl_topic_type").attr('disabled', true);
    }
}

这是我的模型函数，其中我只获取一个级别的主题：

 public function parentTopic()
{
    return $this->belongsTo('App\Models\Topic', 'parent_id');
}



public function scopeParent($query)
{
    return $query->whereNull('parent_id');
}

现在在我的主题下拉列表中，我得到了如下主题： [！[在此处输入图像描述][2][2]

有谁能帮我改变等级制度吗？…提前谢谢。 [2] :

 public function parentTopic()
{
    return $this->belongsTo('App\Models\Topic', 'parent_id');
}



public function scopeParent($query)
{
    return $query->whereNull('parent_id');
}