Question

我一直在开发一个应用程序来连接我最近为测试而构建的API（它运行正常）但我认为我的代码会出现未知错误。我是一个尝试jQuery的新手。这是我的代码：

$(document).ready(function(){
    $.ajax({
        url: 'api.lynmerc-enterprise.com/requests',
        async: false, 
        type: 'GET',
        //dataType: 'json', 
        success: function(data){
            console.log(data);

            var data2 = jQuery.parseJSON(data);
            console.log(data2);

            //assign parsed JSON to variables
            var apiStatus = data2.status;
            var apiMessage= data2.message;
            var apiData = data2.data; 

            var data3 = $.parseJSON(apiData);
            //Here we get Requester info and material JSON
            console.log(data3);
            var materials = data3.material;

            var data4 = $.parseJSON(materials);
            console.log(data4);

            //loop through the data and assign needed info to table
            $.each(data3, function(i,row){
                var dateRequested = data3.date;
                var projectCode = data3.p_code;
                var requestNumber = data3.rq_no;
                var materialName = data4.name;
                var purpose = data4.purpose;
                var quantity = data4.quantity;
                var cost = data4.cost;
                var total = data4.total; 
                $("table.table").append("<tr><td>"+dateRequested+"</td><td>"+projectCode+"</td><td>"+requestNumber+"</td><td>"+materialName+"</td><td>"+purpose+"</td><td>"+quantity+"</td><td>"+cost+"</td><td>"+total+"</td></tr>");
            });
        },
        //error: function(){console.log('Error Encountered')},
        beforeSend: setHeader()

    }); 
});

//set required headers
function setHeader(xhr){
    xhr.setRequestHeader('Api-Key','ZHhjZmIyMHdnazVtdWw=');
    xhr.setRequestHeader('Content-Type','application/json')
}

代码应该以Api-Key作为标题连接到API然后获取格式的Json

{
    'status':success,
    'data':'[{
        "p_code":,"requester_id":,
        "date":,"rq_no":, 
        "id":, "materials":[{
            "name":,
            "purpose":,
            "cost":,
            "quantity":,
            "status":,
            "rq_no":,"id":,
            "total":},
            ...
        ]}
        .....
    ]'

...数据将分配给变量，然后附加到主HTML表

Answer 1

我终于完美地工作了：

            <script type="text/javascript">
            function fetchJson(){
                $(document).ready(function(){
                            $.ajax({
                            url: 'http://api.lynmerc-enterprise.com/requests',
                            headers: {
                                'Api-Key':'ZHhjZmIyMHdnazVtdWw='
                                //'Content-Type':'application/json'

                            },
                            //async: false, //return value as variable not to make an async success callback
                            type: 'GET',
                            dataType: 'json', 
                            success: function(data){
                                console.log(data);

                                //var data2 = JSON.parse(data.data);

                                var data2 = data.data;
                                var data2Array = [];

                                $.each(data2, function(idx, data2){
                                    console.log(data2.p_code);
                                    console.log(data2.date);
                                    console.log(data2.rq_no);

                                    var userfo = data2.user;
                                    console.log(userfo.fullname);
                                    console.log(userfo.project_site);

                                    var material = data2.materials;

                                    var dateRequested = data2.date;

                                    var requestNumber = data2.rq_no;

                                    var requester = userfo.fullname;

                                    var projectSite = userfo.project_site;



                                    $.each(material, function(idx, material){
                                        console.log(material.name);
                                        console.log(material.purpose);
                                        console.log(material.quantity);
                                        console.log(material.cost);
                                        console.log(material.total);
                                        console.log(material.status);

                                        var materialName = material.name;

                                        var purpose = material.purpose;

                                        var quantity = material.quantity;

                                        var cost = material.cost;

                                        var total = material.total;

                                        var requestStatus = material.status;
                                        /*$('#dateRequested').append(dateRequested);
                                        $('#requestNumber').append(requestNumber);
                                        $('#requester').append(requester);
                                        $('#projectSite').append(projectSite);
                                        $('#materialName').append(materialName);
                                        $('#purpose').append(purpose);
                                        $('#quantity').append(quantity);
                                        $('#cost').append(cost);
                                        $('#total').append(total);
                                        $('#requestStatus').append(requestStatus); */

                                        var table = $("#requestsTable");
                                    table.append("<tr><td>"+dateRequested+
                                                            "</td><td>"+requester+
                                                            "</td><td>"+projectSite+
                                                            "</td><td>"+requestNumber+
                                                            "</td><td>"+materialName+
                                                            "</td><td>"+purpose+
                                                            "</td><td>"+quantity+
                                                            "</td><td>"+cost+
                                                            "</td><td>"+total+"</td></tr>");

                                    });








                                });



                            },
                            error: function(){console.log('Error Encountered')},
                            //beforeSend: setHeader()

                        });


                    });

                /*  var request;
                    function setHeader(request){
                        request.setRequestHeader('Api-Key','ZHhjZmIyMHdnazVtdWw=');
                        request.setRequestHeader('Content-Type','application/json')
                    }*/
                }
        </script>

当在代码中使用dataType：'json'时，我们不会再次解析json，因为jQuery会完成所有这些操作，因此当我们再次尝试解析它时会返回错误。然后，为了将它附加到html，我们使用$（selector）.append，其中selector是元素id。在这种情况下，当附加到表时，我们追加到它将是$（＃tableBodyId）.append（“要追加的内容”）;

JQuery不从url获取和解析json

1 个答案: