样本分组

Question

我正在使用2个其他api服务。第一个将从名为“主要类别”的列表中获取项目，如下所示： -

/test/_api/web/lists/getbytitle('MainCategory')/items?$select=Title

它将返回以下json： -

{
    "d": {
        "results": [
            {                    
                "FileSystemObjectType": 0,
                "Id": 15,
                "ID": 15,
                "ContentTypeId": "0x010006DDBDD3BDC9914B92E911733F2A56E1",
                "Title": "A",
                "Modified": "2017-03-01T12:08:35Z",
                "Created": "2017-03-01T12:08:35Z",
                "AuthorId": 1,
                "EditorId": 1,
                "OData__UIVersionString": "1.0",
                "Attachments": false,
                "GUID": "c93d9db6-efd8-4b49-9024-f8cc30c0a48e"
            },
            {
                 "FileSystemObjectType": 0,
                "Id": 16,
                "ID": 16,
                "ContentTypeId": "0x010006DDBDD3BDC9914B92E911733F2A56E1",
                "Title": "B",
                "Modified": "2017-03-01T12:10:27Z",
                "Created": "2017-03-01T12:10:27Z",
                "AuthorId": 1,
                "EditorId": 1,
                "OData__UIVersionString": "1.0",
                "Attachments": false,
                "GUID": "a023853c-e967-4db8-8414-a7c390dcc09a"
            },

我有另一个名为Pages的列表，其中每个页面都链接到一个主要类别项目。

/test/_api/web/lists/getbytitle('pages')/items??$select=Title,MainCategory&$filter=MainCategory eq

这里是返回json： -

{
    "d": {
        "results": [
            {    
                "Title": "Home",
                "MainCategory": "A"
            },
            {    
                "Title": "ewrwe",
                "MainCategory": "A"
            },
            {    
                "Title": "tgtg",
                "MainCategory": "A"
            },
            {    
                "Title": "dsdfsfdfsdfsdfsdfsdsdfsd",
                "MainCategory": "A"
            },
            {    
                "Title": "jk",
                "MainCategory": "A"
            }
        ]
    }
}

现在我想显示一个表格，显示每个类别下的页数。所以我实现了以下内容，它们执行以下操作： -

获取所有主要类别。
为每个主要类别再次调用页面列表以获取相关页面并计算结果。

这是我的剧本： -

<script>
$(document).ready(function() {
  function getCurrentMainCategoryID() {    
    var results = "";
    var html = "";
    html = "<table style='margin-left:20%;width:50%;boarder:3px solid'><th style='text-align:left'>Main Category</th><th></th><th style='text-align:left'>Pages</th>";
    var url = "/test/_api/web/lists/getbytitle('MainCategory')/items?$select=Title";

    $.ajax({
      url: url,
      method: "GET",
      async: false,
      headers: {
        "Accept": "application/json; odata=verbose"
      },
      success: function(data) {
        if (data.d.results.length > 0) {    
          results = data.d.results;
          for (var j2 = 0; j2 < results.length; j2++) {    
            var currentMainCatTitle = results[j2].Title;

            $.ajax({
              url: "/test/_api/web/lists/getbytitle('pages')/items??$select=Title,MainCategory&$filter=MainCategory eq " + "'" + currentMainCatTitle + "'",
              method: "GET",
              async: false,
              headers: {
                "Accept": "application/json; odata=verbose"
              },
              success: function(data) {
                if (data.d.results.length > 0) {
                  html = html + "<tr><td>" + "</td>" + "<td>  </td><td>" + data.d.results.length + "</td></tr>";
                }
              },
              error: function(data) {
              }
            });
          }    
        }    
      },
      error: function(data) {
      }
    });
    $("#inserthere").after(html + "</table>");

    return results;
  }

  getCurrentMainCategoryID();
});
</script>

现在我的脚本将显示正确的结果。但我面临一个性能问题，因为我正在为每个主要类别发起一个单独的呼叫。所以我不确定我是否可以修改我的脚本来执行以下操作： -

获取所有主要类别（正如我目前所做的那样）。
立即获取所有页面。而不是单独获取每个主要类别的页面..
在脚本内部根据主要类别对页面进行分组。并将结果存储在临时变量
遍历主要类别项目，并且对于每个主要类别项目，从步骤3中的临时变量获取其计数...

所以有人可以就此提出建议吗？我如何根据主要类别对json进行分组？

Answer 1

也许清理代码会有帮助吗？我想到的是将你需要进行的所有调用放到一个数组中然后异步映射api调用然后你会更快地返回所有页面。您需要使getPages的映射并行发生。

<script>
$(document).ready(function() {

  function getCurrentMainCategoryID() {

    var results = "";
    var html = "<table style='margin-left:20%;width:50%;boarder:3px solid'><th style='text-align:left'>Main Category</th><th></th><th style='text-align:left'>Pages</th>";
    var url = "/test/_api/web/lists/getbytitle('MainCategory')/items?$select=Title";

    $.ajax({
      url: url,
      method: "GET",
      async: false,
      headers: {
        "Accept": "application/json; odata=verbose"
      },
      success: function(data) {

        var getTitle = result => result.Title;
        var results = data.d.results;
        var titles = results.map(getTitle);

        // not sure if it will be done in parallel
        // look for a library async.js vs parallel.js ???
        titles.map(title => getPages(title)) 

      }
    });

    $("#inserthere").after(html + "</table>");

    return results;
  });

  function getPages(title) {
    $.ajax({
      url: "/test/_api/web/lists/getbytitle('pages')/items??$select=Title,MainCategory&$filter=MainCategory eq " + "'" + title + "'",
      method: "GET",
      async: false,
      headers: {
        "Accept": "application/json; odata=verbose"
      },
      success: function(data) {
        if (data.d.results.length > 0) {
          html = html + "<tr><td>" + "</td>" + "<td>  </td><td>" + data.d.results.length + "</td></tr>";
        }
      }
    });
  }

  getCurrentMainCategoryID();
});
</script>

如果要将元素分组为对象数组，只需更新第二个ajax调用以创建数据对象，并在mainCat的第一个映射中创建所需分组的数组：

$(document).ready(function() {

  function getCurrentMainCategoryID() {

    var grouped;
    var html = "<table style='margin-left:20%;width:50%;boarder:3px solid'><th style='text-align:left'>Main Category</th><th></th><th style='text-align:left'>Pages</th>";
    var url = "/test/_api/web/lists/getbytitle('MainCategory')/items?$select=Title";

    $.ajax({
      url: url,
      method: "GET",
      async: false,
      headers: {
        "Accept": "application/json; odata=verbose"
      },
      success: function(data) {
        var getTitle = result => result.Title;
        var results = data.d.results;
        var titles = results.map(getTitle);

        grouped = titles.map(title => {
          return {title: title, results: getPages(title)}
        });

        console.log(grouped);
      }
    });

    $("#inserthere").after(html + "</table>");

    return grouped;
  });

  function getPages(title) {

    var resultsObject;

    $.ajax({
      url: "/test/_api/web/lists/getbytitle('pages')/items??$select=Title,MainCategory&$filter=MainCategory eq " + "'" + title + "'",
      method: "GET",
      async: false,
      headers: {
        "Accept": "application/json; odata=verbose"
      },
      success: function(data) {
        resultsObject = {
          pages: data.d.results,
          length: data.d.results.length
        }
      }
    });

    return resultsObject;
  }

  getCurrentMainCategoryID();
});

样本分组

[
  {
    title: _,
    results: {
      pages: [...],
      length: n
    }
  }, {
    title: _,
    results: {
      pages: [...],
      length: n
    }
  },
]

如果您在一次通话中收到所有数据，则可以查询mainCategories和分组。

分组的示例代码

function getMainCat(data, cat) {
  let grouped = data.reduce((acc, item) => {
    let selection = Object.keys(item).reduce((acc, key) => {

      let results = item[key].results;
      let pages = results.filter(result => result["MainCategory"] == cat);

      let select = {
        title: key,
        results: {
          pages: pages,
          length: pages.length
        }
      }

      return acc.concat(select);
    }, []);

    return acc.concat(selection);
  }, []);

  return grouped;
}

let data = [
  {
    "d": {
      "results": [
        {
          "Title": "Home",
          "MainCategory": "A"
        }, {
          "Title": "ewrwe",
          "MainCategory": "A"
        }, {
          "Title": "tgtg",
          "MainCategory": "A"
        }, {
          "Title": "dsdfsfdfsdfsdfsdfsdsdfsd",
          "MainCategory": "A"
        }, {
          "Title": "jk",
          "MainCategory": "B"
        }
      ]
    }
  }
]

console.log("searching A: ");
console.log(getMainCat(data, 'A'));
console.log("searching B: ");
console.log(getMainCat(data, 'B'));
console.log("searching C: ");
console.log(getMainCat(data, 'C'));

这是一个总体建议，我喜欢这段代码的清理方式！

Answer 2

如果你想制作最少数量的ajax呼叫，你需要只做两个，正如你所说的那样（尽管如果你真的真的想要，你可以只用一个）。关键是要嵌套它们：所以第一个成功触发第二个，然后第二个成功响应显示结果。

我做的事情如下。在这里，我只是显示主要类别中的GUID，以及匹配页面的数量，如果我理解正确的话，基本上就是你所追求的。

＆＃13;

var mainCategorySimulatedResponse = {
  "d": {
    "results": [{
      "FileSystemObjectType": 0,
      "Id": 15,
      "ID": 15,
      "ContentTypeId": "0x010006DDBDD3BDC9914B92E911733F2A56E1",
      "Title": "A",
      "Modified": "2017-03-01T12:08:35Z",
      "Created": "2017-03-01T12:08:35Z",
      "AuthorId": 1,
      "EditorId": 1,
      "OData__UIVersionString": "1.0",
      "Attachments": false,
      "GUID": "c93d9db6-efd8-4b49-9024-f8cc30c0a48e"
    }, {
      "FileSystemObjectType": 0,
      "Id": 16,
      "ID": 16,
      "ContentTypeId": "0x010006DDBDD3BDC9914B92E911733F2A56E1",
      "Title": "B",
      "Modified": "2017-03-01T12:10:27Z",
      "Created": "2017-03-01T12:10:27Z",
      "AuthorId": 1,
      "EditorId": 1,
      "OData__UIVersionString": "1.0",
      "Attachments": false,
      "GUID": "a023853c-e967-4db8-8414-a7c390dcc09a"
    }]
  }
}

var pagesSimulatedResponse = {
  "d": {
    "results": [{
      "Title": "Home",
      "MainCategory": "A"
    }, {
      "Title": "ewrwe",
      "MainCategory": "A"
    }, {
      "Title": "tgtg",
      "MainCategory": "A"
    }, {
      "Title": "dsdfsfdfsdfsdfsdfsdsdfsd",
      "MainCategory": "A"
    }, {
      "Title": "jk",
      "MainCategory": "A"
    }, {
      "Title": "Cliff Curtis",
      "MainCategory": "B"
    }, {
      "Title": "Martin Henderson",
      "MainCategory": "B"
    }]
  }
}


$(document).ready(function() {

  function showMainCategoryData() {

    var mainCategories, pages;

    /*
    // Make nested ajax calls here, one for Main Categories, the other for Pages.
    $.ajax({
      url: url,
      ...
      success: function(data) {

        if (data.d.results.length > 0) {
          // store Main Categories data
          mainCategories = data.d.results;

          // call nested `Pages` ajax (only runs with Main Categories successful response)
          $.ajax({
            url: url,
            ...
            success: function(data) {
              if (data.d.results.length > 0) {
                // store Pages data
                pages = data.d.results;

                // display results
                displayResults();

              } else {
                console.log('Pages returned no data');
              }
            },
            error: function(data) {}
          });
        } else {
          console.log('MainCategories returned no data');
        }
      },
      error: function(data) {}
    }); 
    */

    function displayResults() {
      var results = "";
      var html = "<table class='mainCatTable'><th class='mainCatHdr'>Main Category</th><th class='mainCatHdr'>Pages</th>";

      //loop over Main Categories
      for (var catIdx = 0; catIdx < mainCategories.length; catIdx++) {

        var pageCount = 0;

        for (var pageIdx in pages) {
          if (pages[pageIdx].MainCategory == mainCategories[catIdx].Title)
            pageCount++;
        }

        html += "<tr><td class='padRight'>" + mainCategories[catIdx].GUID + "</td>" + "<td>" + pageCount + "</td></tr>";
      }

      $("#inserthere").append(html + "</table>");
    }

    /*************** emulation code only ***************/
    // emulate above ajax calls    
    function ajaxCatSuccess(data) {
      if (data.d.results.length > 0) {
        // store Main Categories data
        mainCategories = data.d.results;

        // emulate call to nested `Pages` ajax
        ajaxPageSuccess(pagesSimulatedResponse);

      } else {
        console.log('MainCategories returned no data');
      }
    }

    function ajaxPageSuccess(data) {
      if (data.d.results.length > 0) {
        // store Pages data
        pages = data.d.results;

        // display results
        displayResults();

      } else {
        console.log('Pages returned no data');
      }
    }

    // trigger first simulated ajax call

    ajaxCatSuccess(mainCategorySimulatedResponse)
    /************ end of emulate code ***************/

  }

  showMainCategoryData();

});

＆＃13;

.mainCatTable {
  margin-left: 10%;
  width: 80%;
  border: 3px solid
}

.mainCatHdr {
  text-align: left
}

.padRight {
  padding-right: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inserthere"></div>

＆＃13;

Answer 3

一些建议：

不是每次都根据Pages API调用响应调用mainCategory API调用。您只需调用一次API（mainCategory＆amp; pages）一次即可提高应用程序的性能。

您可以异步调用两个API来获取页面加载数据。

$(document).ready(function() {
  function getCurrentMainCategoryID() {
var url = "/test/_api/web/lists/getbytitle('MainCategory')/items?$select=Title";
$.ajax({
  url: url,
  method: "GET",
  headers: {
    "Accept": "application/json; odata=verbose"
  },
  success: function(data) {
    if (data.d.results.length > 0) {
      var mainCategoriesData = data.d.results;
      getPagesData();
    } else {
      console.log('MainCategories returned no data');
    }

    function getPagesData() {
      var url = "/test/_api/web/lists/getbytitle('pages')/items";
      $.ajax({
        url: url,
        method: "GET",
        headers: {
          "Accept": "application/json; odata=verbose"
        },
        success: function(data) {
          if (data.d.results.length > 0) {
            var pagesData = data.d.results;
          } else {
          console.log('Pages returned no data');
          }
        }
    });
    }
  }
});

现在，您有pages个数据和main category数据。

var mainCategoriesData = [
            {                    
                "FileSystemObjectType": 0,
                "Id": 15,
                "ID": 15,
                "ContentTypeId": "0x010006DDBDD3BDC9914B92E911733F2A56E1",
                "Title": "A",
                "Modified": "2017-03-01T12:08:35Z",
                "Created": "2017-03-01T12:08:35Z",
                "AuthorId": 1,
                "EditorId": 1,
                "OData__UIVersionString": "1.0",
                "Attachments": false,
                "GUID": "c93d9db6-efd8-4b49-9024-f8cc30c0a48e"
            },
            {
                 "FileSystemObjectType": 0,
                "Id": 16,
                "ID": 16,
                "ContentTypeId": "0x010006DDBDD3BDC9914B92E911733F2A56E1",
                "Title": "B",
                "Modified": "2017-03-01T12:10:27Z",
                "Created": "2017-03-01T12:10:27Z",
                "AuthorId": 1,
                "EditorId": 1,
                "OData__UIVersionString": "1.0",
                "Attachments": false,
                "GUID": "a023853c-e967-4db8-8414-a7c390dcc09a"
            }];

var pagesData = [
            {    
                "Title": "Home",
                "MainCategory": "A"
            },
            {    
                "Title": "ewrwe",
                "MainCategory": "A"
            },
            {    
                "Title": "tgtg",
                "MainCategory": "A"
            },
            {    
                "Title": "dsdfsfdfsdfsdfsdfsdsdfsd",
                "MainCategory": "A"
            },
            {    
                "Title": "jk",
                "MainCategory": "A"
            }
        ];

使用for ... in循环，您可以根据page counts重复响应并获取main category。

<强>样本

＆＃13;

var mainCategoriesData = [
            {                    
                "FileSystemObjectType": 0,
                "Id": 15,
                "ID": 15,
                "ContentTypeId": "0x010006DDBDD3BDC9914B92E911733F2A56E1",
                "Title": "A",
                "Modified": "2017-03-01T12:08:35Z",
                "Created": "2017-03-01T12:08:35Z",
                "AuthorId": 1,
                "EditorId": 1,
                "OData__UIVersionString": "1.0",
                "Attachments": false,
                "GUID": "c93d9db6-efd8-4b49-9024-f8cc30c0a48e"
            },
            {
                 "FileSystemObjectType": 0,
                "Id": 16,
                "ID": 16,
                "ContentTypeId": "0x010006DDBDD3BDC9914B92E911733F2A56E1",
                "Title": "B",
                "Modified": "2017-03-01T12:10:27Z",
                "Created": "2017-03-01T12:10:27Z",
                "AuthorId": 1,
                "EditorId": 1,
                "OData__UIVersionString": "1.0",
                "Attachments": false,
                "GUID": "a023853c-e967-4db8-8414-a7c390dcc09a"
            }];

var pagesData = [
            {    
                "Title": "Home",
                "MainCategory": "A"
            },
            {    
                "Title": "ewrwe",
                "MainCategory": "A"
            },
            {    
                "Title": "dkjfkdf",
                "MainCategory": "B"
            },            
            {    
                "Title": "tgtg",
                "MainCategory": "A"
            },
            {    
                "Title": "dsdfsfdfsdfsdfsdfsdsdfsd",
                "MainCategory": "A"
            },
            {    
                "Title": "slkfjrel",
                "MainCategory": "B"
            },            
            {    
                "Title": "jk",
                "MainCategory": "A"
            }
        ];			
        
var resArr = [];  
var count = 1;
for (var i in mainCategoriesData) {
  for (var j in pagesData) {
    if(pagesData[j].MainCategory == mainCategoriesData[i].Title) {
      mainCategoriesData[i].pagesCount = count++;
    }
  }
  count = 1;
  resArr.push({
    "Main Category": mainCategoriesData[i].Title,
    "PagesCount": mainCategoriesData[i].pagesCount
  })
}        

console.log(resArr);

＆＃13;

Answer 4

使用jQuery.getJSON()它将返回已解析的对象。你只需要两个ajax调用。修改网址并删除要在一次通话中获取所有网页的类别的过滤器。

var results = [];
var html = "<table style='margin-left:20%;width:50%;boarder:3px solid'><th style='text-align:left'>Main Category</th><th></th><th style='text-align:left'>Pages</th>";

$.getJSON( "/test/_api/web/lists/getbytitle('MainCategory')/items?$select=Title")
  .done(function( categories ) {
    var mainCategoryResults = categories.d.results;
    $.getJSON( "/test/_api/web/lists/getbytitle('pages')/items?$select=Title,MainCategory")
      .done(function( pages ) {
        var pageResults = pages.d.results;      
        $(mainCategoryResults).each(function(k,v){
            var i=0;
            $(pageResults).each(function(key,val){
                if(v['Title'] === val['MainCategory']){
                    i++;
                }
            });
        results.push([v.Title,i]);
        });       
      })
      .fail(function( jqxhr, textStatus, error ) {
        var err = textStatus + ", " + error;
        console.log( "Pages Request Failed: " + err );
    });     
  })
  .fail(function( jqxhr, textStatus, error ) {
    var err = textStatus + ", " + error;
    console.log( "Categories Request Failed: " + err );
});

您可以在下面的代码段中测试创建结果的双each()循环。

var a = {
  "d": {
    "results": [{
        "FileSystemObjectType": 0,
        "Id": 15,
        "ID": 15,
        "ContentTypeId": "0x010006DDBDD3BDC9914B92E911733F2A56E1",
        "Title": "A",
        "Modified": "2017-03-01T12:08:35Z",
        "Created": "2017-03-01T12:08:35Z",
        "AuthorId": 1,
        "EditorId": 1,
        "OData__UIVersionString": "1.0",
        "Attachments": false,
        "GUID": "c93d9db6-efd8-4b49-9024-f8cc30c0a48e"
      },
      {
        "FileSystemObjectType": 0,
        "Id": 16,
        "ID": 16,
        "ContentTypeId": "0x010006DDBDD3BDC9914B92E911733F2A56E1",
        "Title": "B",
        "Modified": "2017-03-01T12:10:27Z",
        "Created": "2017-03-01T12:10:27Z",
        "AuthorId": 1,
        "EditorId": 1,
        "OData__UIVersionString": "1.0",
        "Attachments": false,
        "GUID": "a023853c-e967-4db8-8414-a7c390dcc09a"
      }
    ]
  }
};
var b = {
  "d": {
    "results": [{
        "Title": "Home",
        "MainCategory": "A"
      },
      {
        "Title": "ewrwe",
        "MainCategory": "A"
      },
      {
        "Title": "tgtg",
        "MainCategory": "A"
      },
      {
        "Title": "dsdfsfdfsdfsdfsdfsdsdfsd",
        "MainCategory": "A"
      },
      {
        "Title": "jk",
        "MainCategory": "A"
      }
    ]
  }
};
var c = [];
$(a.d.results).each(function(k, v) {
  var i = 0;
  $(b.d.results).each(function(key, val) {
    if (v['Title'] === val['MainCategory']) {
      i++;
    }
  });
  c.push([v.Title, i]);
});
console.log(c);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

按我的json对象分组并获取每组的计数

4 个答案:

样本分组

分组的示例代码