如何从jquery中的JSON数据类型进行迭代

时间:2019-12-27 12:58:24

标签: javascript php jquery

我从下拉菜单中选择了一个表单,请求转到控制器并在 JSON formate

[{id: 2, slug: "manager", name: "Assistant Manager", created_at: "2019-12-10 09:20:45",…}]
0: {id: 2, slug: "manager", name: "Assistant Manager", created_at: "2019-12-10 09:20:45",…}
created_at: "2019-12-10 09:20:45"
id: 2
name: "Assistant Manager"
permissions: [{id: 2, slug: "edit-users", name: "Edit Users", created_at: "2019-12-10 09:21:01",…}]
0: {id: 2, slug: "edit-users", name: "Edit Users", created_at: "2019-12-10 09:21:01",…}
slug: "manager"
updated_at: "2019-12-10 09:20:45"

现在我想从permissions进行迭代,并在另一个下拉列表中显示name,其中包含多个选择选项,我不知道如何从该JSON进行迭代,我尝试了以下脚本,但没有工作

 $(document).ready(function () {
        $("#roles").on('change', function () {
            var query = $(this).val();
            // alert(query);

            if (query != '') {

                $.ajax({
                    url: "{{route('get-roles-ajax-call')}}",
                    method: "POST",
                    dataType: 'JSON',
                    data: {"_token": "{{ csrf_token() }}", query: query},
                    success: function (data) {
                        var values = $.parseJSON(data)
                        $(values).each(function(i,val){
                            $.each(val,function(key,val)
                            {
                                console.log(key + " : " + val);
                            });

                        });


                    }
                });
            }
             return false;
        });
    });

1 个答案:

答案 0 :(得分:1)

设置dataType: 'JSON'行时,您已经在告诉$.ajax函数返回JSON。
引自jQuery documentation of $.ajax

  

“ json”:将响应评估为JSON并返回一个JavaScript对象。

因此,一旦收到数据,就无需解析数据。已经是JSON。

现在循环遍历数据中的每个对象以搜索permissions属性。如果对象具有Permissions属性,并且该值的值是一个不为空的数组,则循环遍历permissions数组中的每个对象,并在每个权限上查找name属性。

$.each(data, function(i, entry) {
    var permissions = entry.hasOwnProperty('permissions');
    if (permissions && permissions.length) {
        $.each(entry.permissions, function(j, permission) {
             console.log(permission.name);
        });
    }
});

尽管我建议您修改服务器响应或创建新的服务器响应,以便所有这些过滤工作都在服务器端完成,而您只需调用服务器即可获取所需的数据。