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

我在SharePoint 2013 Online中有两个列表。我需要为用户输入的键（字符串）获取匹配值，排序，并将两个列表显示为一个。如果我能够使用SQL创建一个视图，那就很容易了。最好的解决方案似乎是只显示两个列表

我曾尝试使用SPD链接源，但“链接字段”选项从未显示，且无预览SPD非常糟糕（MS在想什么？）。工作流不可行。可在“数据表视图”（客户要求）中编辑列表项。查找需要选择以显示相关字段

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

我所拥有的：

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);

$（函数（）{
$.ajax({
url:“sharepointlist/_api/web/lists/GetByTitle（'List1'）/items”，
键入：“获取”，
标题：{“accept”：“application/json；odata=verbose”
}, 
}).成功（功能（数据）{
var title=''；
变量类型=“”；
各美元（数据d.结果，
功能（键、值）{
title+=“title:”+value.title+“
”；
类型+=“类型：”+value.type+“
”；
}); 
$（“#tdtitle”）.html（title）；
$（“#tdtype”）.html（状态）；
$.ajax({
url:“sharepointlist/_api/web/List/GetByTitle（'List2'）/items”，
键入：“获取”，
标题：{“accept”：“application/json；odata=verbose”
}, 
}).成功（功能（数据）{
var title2=''；
var状态=“”；
各美元（数据d.结果，
功能（键、值）{
title2+=“title2:”+value.Title+“
”；
城市+=“州：”+value.State+“
”；
}); 
$（“#tdsecond”）.html（标题2）；
$（“#tdstate”）.html（城市）；

我将任务分为两部分

首先，您需要组合从

GET

调用检索的数据

<>你可以考虑用这样的承诺：

$.when(
    // Get List1
    $.get("sharepointlist/_api/web/lists/GetByTitle('List1')/item").then( function(data) {
        return data.d.results;
    }),

    // Get List2
    $.get("sharepointlist/_api/web/lists/GetByTitle('List2')/items").then( function(data) {
        return data.d.results;
    })

).then(processData);

function processData(list1, list2) {
    var res = list1.concat(list2);
}

现在，您需要处理数据。首先，您可以按

标题对新数组进行排序

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

现在，您需要循环排序的数据并组合具有相同标题的对象

res = res.reduce(function(a, b) {
    var t = a.slice(-1)[0]; //it's like getting last element
    if (t && t.Title === b.Title) {
        if (b.State) {
            t.State = b.State;
        } else {
            t.Type = b.Type;
        }
    } else {
        a.push(b);
    }
    return a;
}, []);

现在只需将新数据分配到DOM中

更新：

使用jQuery
$.extend（）
连接元素时合并所有属性的示例

PS:jQuery
$.extend（）
忽略null或未定义的属性

指向Plunkr工作解决方案的链接，其中包含硬编码JSON文件

 
看来，您正在尝试对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/>"; 
   });
}

更新排序功能

替换：

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

与

这显然需要一些数据映射。具体问题是什么？我会尝试一下并让您知道。谢谢！@teamnorge，这是一个正确的方法，但我想提出一些建议1）我建议使用$.getJSON而不是。$.get以json格式返回结果2）也许最好像我的示例TeamNorge中演示的那样实现更通用的联接算法，谢谢你让我开始。$when是关键。我将你的代码放入我的设置中并尝试了它，但要么我无法获得数据，要么（在我用$ajax块替换干净、简单的$get之后），我得到了object，object（ok可以修复）然后在“'）处出现语法错误。然后（processData）；行。检查了又检查了，但没有发现我的错误。样本似乎对我也不起作用。只是不是我的一天。尽管取得了进展，感谢你们两位。是的。这是我的目标。我需要研究你的解决方案。你显示的结果正是我想要的。瓦迪姆，这似乎是一个干净的解决方案，可以轻松扩展on很好。我花了一段时间才明白。一切似乎都在进行到底。“items1，items2”似乎需要一个定义？代码运行，列表被检索，但没有数据（查看控制台）。我收到一个错误“无法获取未定义或空引用的属性“localeCompare”，这告诉我？没有数据。不确定如何更正此错误。其他示例（MS）对变量使用不同的方法。Vadim，就是这样。我有两个标题为null的项。谢谢！我错过了JSON正确返回的最后一步，-$。each（）以下操作（其中“result”是保存数据的变量）var Title=''；var type=''；$。each（result，function（index，value）{Title+=“Title:”+value.Title+“
”；type+=”type:“+value.type+”
“；}”）；瓦迪姆，你能编辑你的解决方案，将最后一部分包含在输出中吗？这样，其他人可以看到一个格式很好的块，而不是我评论中的混乱版本。
[
  {
    "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);
});