javascript - 检索两个列表，对值进行排序和比较，然后显示所有结果

Question

我在 SharePoint 2013 Online 中有两个列表。我需要为用户输入的键(字符串)获取匹配值、排序并将两个列表显示为一个列表。如果我能够使用 SQL 创建 View 就足够简单了。最好的解决方案似乎是只显示两个列表。

我试过使用 SPD 链接源，但“链接字段”选项从未显示，而且没有预览的 SPD 很糟糕(微软在想什么？)。工作流不可行。可以在“数据 TableView ”(客户要求)中编辑列表项。查找需要选择以显示相关字段。

我可以获得两个列表并分别显示它们。

我有什么:

List 1                          List 2
fruit apple  type rome          fruit apple  state washington
fruit pear   type bartlett      fruit pear   state oregon
fruit grapes type red           fruit orange state florida

我想要的:

fruit apple  type rome      state washington 
fruit grapes type red 
fruit orange                state florida
fruit pear   type bartlett  state oregon

我遗漏了两件事(也许更多):一个数组，我可以使用它进行排序，以及一个用于匹配两个列表中的水果的比较。真实列表可能有 50-120 个项目(每个)需要匹配。

所有元素都应归还。如果匹配，则数据应在同一行中。如果不是，则应显示空白。

下面的代码通过一个 html 页面显示，其中每个表格单元格的 ID 与下面脚本中的单元格引用相匹配。它没有排序，行不匹配。

$(function() {
    $.ajax({
    url: "sharepointlist/_api/web/lists/GetByTitle('List1')/items",

    type: "GET",
    headers: { "accept": "application/json;odata=verbose"
      }, 
    }).success(function (data) {

        var title = '';
        var type = '';
         $.each(data.d.results, 
        function (key, value) {

        title += "Title: " + value.Title + "<br/>";
        type += "Type: " + value.Type  + "<br/>";
        }); 

    $("#tdtitle").html(title);
    $("#tdtype").html(status);

$.ajax({
    url: "sharepointlist/_api/web/lists/GetByTitle('List2')/items",

    type: "GET",
    headers: { "accept": "application/json;odata=verbose"
      }, 
    }).success(function (data) {

        var title2 = '';
        var state = '';
         $.each(data.d.results, 
        function (key, value) {

        title2 += "Title2: " + value.Title + "<br/>";
        city += "State: " + value.State + "<br/>";
        }); 

    $("#tdsecond").html(title2);
    $("#tdstate").html(city);

Answer 1

您似乎正在尝试对从 REST 查询返回的列表项执行“加入”操作。如果是这样，您可以考虑以下方法

function getListItems(webUrl,listTitle,selectProperties){
   return $.getJSON( webUrl + "/_api/web/lists/GetByTitle('" + listTitle + "')/items?$select=" + selectProperties.join(','))
   .then(function(data){
        return data.value.map(function(item){
             return selectProperties.reduce(function(result, key) { 
                 result[key] = item[key]; 
                 return result; 
             },{});    
        });
    });    
}


function joinListItems(left, right, key) {
    if(left.length == 0 || right.length == 0)
        return new Error("No data was found");


    var columns = Object.keys(left[0]).concat(Object.keys(right[0]));

    var createRow = function(left,right){
        var row = {};
        columns.forEach(function(key){
          row[key] = null;
        });
        var values = left != null ? left : right;
        for(var name in values) row[name] = values[name];
        return row;
    };
    var updateRow = function(existingRow,values){
        for(var name in values) existingRow[name] = values[name];
    };

    return left.concat(right).reduce(function(result, current, index){ 

      if(index < left.length){ 
           result.rows.push(createRow(current,null));   
           result.keys[current[key]] = index;
      }
      else {
           var rowIdx = result.keys[current[key]];
           if(typeof rowIdx !== 'undefined'){
               updateRow(result.rows[rowIdx],current);
           }
           else {
               result.rows.push(createRow(null,current));
           }
      } 

      return result;
    },{rows: [], keys: {}}).rows;

}



$.when(
    // Get List1
    getListItems( _spPageContextInfo.webAbsoluteUrl, "List1",['Title','Type']),
    // Get List2
    getListItems( _spPageContextInfo.webAbsoluteUrl, "List2",['Title','State'])

)
.then(function(items1,items2){
    var key='Title';
    var result = joinListItems(items1,items2,key);

    result = result.sort(function(a, b){
        return a.Title.localeCompare(b.Title);
    });

    console.log(JSON.stringify(result,null,2));
    //displayResults(result);
});


//print results (from comment section) 
function displayResults(items){
   var title = ''; 
   var type = ''; 
   $.each(items, function (index, item) { 
       title += "Title: " + item.Title + "<br/>"; 
       type += "Type: " + item.Type + "<br/>"; 
   });
}

You also might find this thread helpful that specifically discusses join operation.

结果

[
  {
    "Title": "fruit apple",
    "Type": "type rome",
    "State": "state washington"
  },
  {
    "Title": "fruit grapes",
    "Type": "type red",
    "State": null
  },
  {
    "Title": "fruit orange",
    "State": "state florida",
    "Type": null
  },
  {
    "Title": "fruit pear",
    "Type": "type bartlett",
    "State": "state oregon"
  }
]

排序功能更新

替换:

 result = result.sort(function(a, b){
    return a.Title.localeCompare(b.Title);
});

与

result = result.sort(function(a, b){
    if(!a.Title) a.Title = "";
    if(!b.Title) b.Title = "";
    return a.Title.localeCompare(b.Title);
});