如何在 Laravel 中使用 ajax 显示多个数据

Question

我想在我的视图中显示多个数据，这些数据依赖于其他数据。例如，我想显示一个父组名称，然后是它的子组，然后是下一个父组，然后是它的子组。我很困惑如何做到这一点。我正在为此使用 ajax 调用，但它没有产生我想要的结果。

   $.ajax({
        url:'group/fetchparentgroups',
        type:'get',
        success:function(data,status){     //data is a json array object 
                                           //containing all the parent groups
        for(key in data){
            console.log(data[key].name);
            ajaxFetchChildGroups(data[key].id,function(output){ 
            console.log(output) });
        }
        }});

        //the following function take a parent group id as parameter and 
        //return an array containing all the child of that particular parent

    function ajaxFetchChildGroups(parent_group_id,handleData){
    $.ajax({
        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf- 
        token"]').attr('content') },
        url:'group/fetchchildgroups',
        type:'post',
        data:{'id':parent_group_id},
        success:function(data,status){  
        handleData(data); 
        }});
    }

代码的输出是

--第一个父组名

-第二个父组名

-第一个父母的孩子

-第一个父母的孩子

但应该是的

--第一个父组名

-第一个父母的孩子

-第二个父组名

-第二个父母的孩子

该代码有什么问题。或者推荐另一种技术来做到这一点，如果我通过发送数据直接从控制器加载视图，然后我如何在控制器中创建这样的数据作为子依赖于它们的父级，这意味着我必须遍历父级来获取子级。

我是否应该为具有两个属性 parent 和一个包含该父项的子项的数组创建一个自定义类，然后我返回该自定义类的对象数组以供查看。

Answer 1

你应该将异步添加到 ajaxFetchChildGroups

function ajaxFetchChildGroups(parent_group_id,handleData){
$.ajax({
    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
    url:'group/fetchchildgroups',
    type:'post',
    data:{'id':parent_group_id},
    async:false,
    success:function(data,status){  
    handleData(data); 
    }});
}