javascript - 数据表不呈现结果

Question

我正在使用数据表插件来呈现一些结果，这里的复杂性是我必须循环遍历 Sharepoint 中的一些列表，然后进行查询，然后将每个结果附加到最终结果中，然后显示最终结果.

当我调试 foreach(result) 时，我可以看到附加了结果，到目前为止我得到了 13 个结果项。

然而，当调试器到达 datatable.add 方法时，数组为空，没有任何内容呈现。

function GetData(billCycleId, clientCode, jobCodes, engagementCode) {
                    var enhanceFunctions = [
                        function(searchResultRow) {
                            return spService.AddHyperLinkOnFields(searchResultRow, config.HyperLinks);
                        },
                        function(searchResultRow) {
                            return spService.AddPresenceOnFields(searchResultRow, config.UserFields);
                        },
                        function(searchResultRow) {
                            return spService.FormatDateFields(searchResultRow, config.DateFields, generalConfig.DateTimeFormat);
                        },
                        function(searchResultRow) {
                            return spService.AddImageMapping(searchResultRow, config.ImageFields);
                        },
                        function(searchResultRow) {
                            return spService.FormatNumberFields(searchResultRow, config.NumberFields);
                        }
                    ];

                    var selectProperties = spService.TransformFieldsToSelectProperties(config.Fields); 
                    var extendedSelectProperties = selectProperties.slice(); // copy array
                    var hyperLinkedProperties = spService.TransformFieldsToSelectProperties(config.HyperLinks)
                    extendedSelectProperties = extendedSelectProperties.concat(hyperLinkedProperties);

                    spService.GetAllListsFromWeb()
                        .then(function(lists){
                            var listEnumerator = lists.getEnumerator();
                            var result =[];
                            while (listEnumerator.moveNext()) {
                                var oList = listEnumerator.get_current();
                                var title = oList.get_title();
                                var id = oList.get_id();
                                if(title.indexOf("Bill Cycles") !== -1){
                                    // Get data from SP
                                    GetRelatedBillCyclesFromList(id, extendedSelectProperties, billCycleId, clientCode, jobCodes, engagementCode, enhanceFunctions)
                                    .then(function (data) {
                                        var trimmedData = spService.SpSearchQuery.TrimSearchResultsToSelectProperties(data, selectProperties);                          
                                        // Add data to dataTable

                                        trimmedData.forEach(function(item){ // loop over source array
                                            result.push(item); //append to result array
                                        });
                                    })
                                    .catch (function (message) {
                                        vm.Name = "Error";
                                        vm.ValidDataLoaded = true;
                                    });
                                }
                                //Do something with oList.
                            }

                            var dataTable = $(tableSelector).DataTable();
                            dataTable.clear().rows.add(result).columns.adjust().draw(); // Resize columns based on new data sizes                                                       
                            vm.ValidDataLoaded = true;

                        })

                }


    function getAllListsFromWeb(){  
                        var deferred = $q.defer();
                        var context = SP.ClientContext.get_current();
                        var web = context.get_web();
                        var lists = web.get_lists();                          
                        context.load(lists);
                        context.executeQueryAsync(
                           function() {
                                $log.info("Successfully retrieved list item result");                          
                                deferred.resolve(lists);
                           },
                           function(error, errorInfo) {
                                $log.warn("Retrieving list item result failed");

                                deferred.reject(errorInfo);
                           }
                        );
                        return deferred.promise;
                    }

更新 1

这个也试过了，没用

function GetData(billCycleId, clientCode, jobCodes, engagementCode) {
                    var enhanceFunctions = [
                        function(searchResultRow) {
                            return spService.AddHyperLinkOnFields(searchResultRow, config.HyperLinks);
                        },
                        function(searchResultRow) {
                            return spService.AddPresenceOnFields(searchResultRow, config.UserFields);
                        },
                        function(searchResultRow) {
                            return spService.FormatDateFields(searchResultRow, config.DateFields, generalConfig.DateTimeFormat);
                        },
                        function(searchResultRow) {
                            return spService.AddImageMapping(searchResultRow, config.ImageFields);
                        },
                        function(searchResultRow) {
                            return spService.FormatNumberFields(searchResultRow, config.NumberFields);
                        }
                    ];

                    var selectProperties = spService.TransformFieldsToSelectProperties(config.Fields); 
                    var extendedSelectProperties = selectProperties.slice(); // copy array
                    var hyperLinkedProperties = spService.TransformFieldsToSelectProperties(config.HyperLinks)
                    extendedSelectProperties = extendedSelectProperties.concat(hyperLinkedProperties);

                    var result =[];

                    var data = spService.GetAllListsFromWeb()
                        .then(function(lists){
                            var listEnumerator = lists.getEnumerator();
                            while (listEnumerator.moveNext()) {
                                var oList = listEnumerator.get_current();
                                var title = oList.get_title();
                                var id = oList.get_id();
                                if(title.indexOf("Bill Cycles") !== -1){
                                    // Get data from SP
                                    GetRelatedBillCyclesFromList(id, extendedSelectProperties, billCycleId, clientCode, jobCodes, engagementCode, enhanceFunctions)
                                    .then(function (data) {
                                        var trimmedData = spService.SpSearchQuery.TrimSearchResultsToSelectProperties(data, selectProperties);                          
                                        // Add data to dataTable

                                        trimmedData.forEach(function(item){ // loop over source array
                                            result.push(item); //append to result array
                                        });
                                    })
                                    .catch (function (message) {
                                        vm.Name = "Error";
                                        vm.ValidDataLoaded = true;
                                    });
                                }
                            }

                            return result;
                        })

                        var resultadata = data;
                        var dataTable = $(tableSelector).DataTable();
                        dataTable.clear().rows.add(resultdata).columns.adjust().draw(); // Resize columns based on new data sizes              
                        vm.ValidDataLoaded = true;

                }

Answer 1

由于数据似乎是一种 promise ，您可以尝试这样做:

//not saving it to data
spService.GetAllListsFromWeb()
.then(function (lists) {
  var listEnumerator = lists.getEnumerator();
  return Promise.all(
    (function(){
      var promises = [];
      while (listEnumerator.moveNext()) {
        var oList = listEnumerator.get_current();
        var title = oList.get_title();
        var id = oList.get_id();
        if (title.indexOf("Bill Cycles") !== -1) {
          // Get data from SP !!! this is also async and returns a promise
          //   add the promise to promises array and wait for all to finish
          //   look above in Promise.all
          promises.push(
            GetRelatedBillCyclesFromList(
              id, 
              extendedSelectProperties, 
              billCycleId, 
              clientCode, 
              jobCodes, 
              engagementCode, 
              enhanceFunctions
            )
            .then(function (data) {
              return spService
              .SpSearchQuery
              .TrimSearchResultsToSelectProperties(
                data, 
                selectProperties
              );
            })
          );
        }
      }
      return promises
    })() //IIFE returning an array of promises
  );
})
.then(
  function(data){
    console.log("got data:",JSON.stringify(data,undefined,2));
    var resultadata = data;
    var dataTable = $(tableSelector).DataTable();
    dataTable.clear().rows.add(resultdata).columns.adjust().draw(); // Resize columns based on new data sizes              
    vm.ValidDataLoaded = true;    
  }
);

您真的应该了解什么是 promise 以及它在 JavaScript 中的使用方式。

由于您编写的函数始终是同步的(只有一个线程运行您的代码)，因此您的函数需要立即返回一个值(非阻塞)。

当函数需要发出网络请求、文件 IO 或长时间运行的进程时，您会立即返回 promise 。一个 promise 是一个对象，它有一个名为 then 的函数，它接受 2 个处理函数

1. Resolve handler:当 promise 解析时调用(网络请求完成并返回值)。向处理程序传递一个参数，该参数是解析值(对于网络请求，这将是响应)。
2. 拒绝处理程序:当 promise 被拒绝时调用。例如，请求的 url 无效或服务器已关闭。这个函数的参数是错误。

所以当你尝试做类似的事情时:

var result = [];
var later = x => new Promise(r=>setTimeout(r(x),100));
[1,2,3,4,5]
.map(
  x => 
    later(x)
    .then(
      x => {
        console.log("resolved with:",x);
        result.push(x);
        return x;
      }
    )
);
console.log("first output",result);

//the output will be:
// first output []
// resolved with: 1
// resolved with: 2
// resolved with: 3
// resolved with: 4
// resolved with: 5

你会看到，当你尝试对结果做某事时，没有任何 promise 得到解决，所以它是空的。在我放在这里的答案中，我使用 Promise.all 解决所有 promise ，然后使用数据表的解决值。