迭代,存储和可视化JSON结构

时间:2014-11-25 07:11:58

标签: javascript jquery ajax json data-visualization

我正在尝试可视化来自JSON结构的数据,通过REST服务检索。我正在通过REST服务检索3个JSON结构,它们彼此依赖。这意味着我正在嵌套3个Ajax调用。每个ajax调用都会收集依赖于ajax调用的数据。例如:

我检索公司某个部门的所有任务。根据有关任务的数据,我检索有关请求它的人的数据。最后,我检索有关任务分配给谁的数据。我的代码:

$( document ).ready(function() {
    $.ajax({
        url: "http://helpdesk.site.com/IT/_vti_bin/ListData.svc/ITHelpdeskRequests?$filter=TaskStatusValue%20eq%20%27Not%20Started%27",
        headers: { 'accept': 'application/json;odata=verbose', 'content-type': 'application/json;odata=verbose'},
        success: function(data){ 

            $.each(data.d.results, function(a, data) { 
                $.ajax({
                    url: "http://helpdesk.site.com/IT/_vti_bin/ListData.svc/ITHelpdeskRequests("+data.RequesterId+")/CreatedBy",
                    headers: { 'accept': 'application/json;odata=verbose', 'content-type': 'application/json;odata=verbose'},
                    success: function(data2){ 

                            $.ajax({
                                    url: "http://helpdesk.site.com/IT/_vti_bin/ListData.svc/ITHelpdeskRequests("+data.AssignedToId+")/AssignedTo",
                                    headers: { 'accept': 'application/json;odata=verbose', 'content-type': 'application/json;odata=verbose'},
                                    success: function(data3){ 


                                            $(".inner").prepend('<p>'+data.Request +' <br>Submitted by: '+data2.d.Name+'<br>Assigned to: '+data3.d.Name+' | Due in: '+data.DueInDays+' day(s)</p>');    

                                            for(var i = 0; i < data3.d.Name.length; i++)
                                                {
                                                    var AssignedTo = data3.d.Name[i];
                                                    for(var j = 0; j < AssignedTo.length; j++)
                                                    {
                                                        var version = AssignedTo[j];
                                                    }
                                                }
                                            console.log(version);
                                    }  
                                });

                    }  
                });

            });         
        }  
    });
});

我通过运行$.each循环来运行整个结构,从而获得所有相关数据。我想要做的是在图表上进行可视化或热图分配给人的任务数量。所以我试图将数据存储在一个javascript数组中,但没有运气。我可以看到,如果我尝试添加它,我的数据会显示得很好。

问题在于,通过运行$.each函数,我得到了同一个人的多个实例。我想(作为一个例子)一个图表,显示已分配任务的人员和多少任务。

有关如何存储和/或可视化的任何建议吗?

编辑回调结构:

    function getAssignedTo(data3) {

    $(".inner").prepend('<p>' + data.Request + ' <br>Submitted by: ' + data2.d.Name + '<br>Assigned to: ' + data3.d.Name + ' | Due in: ' + data.DueInDays + ' day(s)</p>');

}

function getRequester(data2) {
    $.ajax({
        url: "http://helpdesk.site.com/IT/_vti_bin/ListData.svc/ITHelpdeskRequests(" + data.AssignedToId + ")/AssignedTo",
        headers: {
            'accept': 'application/json;odata=verbose',
            'content-type': 'application/json;odata=verbose'
        },
        success: function getAssignedTo(data3)
    });

}

function iterateResults(a, data) {
    $.ajax({
        url: "http://helpdesk.site.com/IT/_vti_bin/ListData.svc/ITHelpdeskRequests(" + data.RequesterId + ")/CreatedBy",
        headers: {
            'accept': 'application/json;odata=verbose',
            'content-type': 'application/json;odata=verbose'
        },
        success: function getRequester(data2)
    });

}

function getTasks(data) {
    $.each(data.d.results, function iterateResults(a, data))
}


function getHelpData() {
    $.ajax({
        url: "http://helpdesk.site.com/IT/_vti_bin/ListData.svc/ITHelpdeskRequests?$filter=TaskStatusValue%20eq%20%27Not%20Started%27",
        headers: {
            'accept': 'application/json;odata=verbose',
            'content-type': 'application/json;odata=verbose'
        },
        success: function getTasks(data)
    });
}

0 个答案:

没有答案