显示数组的结果，然后循环遍历第二个数组

我有两个数组，我用它来模拟两个不同的REST调用的JSON响应，当时有一些静态数据。 一个获取可用的活动类别，另一个获取所有链接，然后搜索以查找哪些链接与哪个类别相关。

这里的目标是构建一个导航，该导航将采用每个类别并在每个类别下方显示相应的链接。

目前我无法使类别只显示一次，并且在与每个类别相关的链接之上，然后在完成后将输出绘制到dom。

我尝试使用$ .one但这不起作用。 有没有人有任何指示或建议推动我朝着正确的方向？ 

var links = [ { "__metadata": { "id": "", "uri": "http://www.whatever.com" }, "Id": 01, "Title": "Link 01 - test category 01", "Link": "https://www.google.com", "Category": { "__metadata": { "type": "" }, "results": [ "Test Category 01" ] }, "Image": null, "ID": 01 }, { "__metadata": { "id": "", "uri": "http://www.whatever.com", "etag": "", "type": "" }, "Id": 02, "Title": "Link 02 - test category 01", "Link": "https://www.google.com", "Category": { "__metadata": { "type": "" }, "results": [ "Test Category 01" ] }, "Image": null, "ID": 02 }, { "__metadata": { "id": "", "uri": "http://www.whatever.com", "etag": "", "type": "" }, "Id": 03, "Title": "Link 01 - test category 02", "Link": "https://www.google.com", "Category": { "__metadata": { "type": "" }, "results": [ "Test Category 02" ] }, "Image": null, "ID": 209 }, { "__metadata": { "id": "", "uri": "http://www.whatever.com", "etag": "", "type": "" }, "Id": 210, "Title": "Link 02 - test category 02", "Link": "https://www.somerandomdomain.com", "Category": { "__metadata": { "type": "" }, "results": [ "Test Category 02" ] }, "Image": null, "ID": 210 } ] //category arr var categoryArr = [ "Test Category 01", "Test Category 02", "Test Category 03" ] var categoryTitle; var menu = $("#output2"); $.each(categoryArr, function (catIndex, category) { $.each(links, function(linkIndex, links) { if(links.Category.results == category) { // DOM ELEMENTS var item = $('
 .navContainer { border: 1px solid grey; margin: 10px; padding:5px; } .links ul li { list-style-type:none; } 
  
 
  
 Result should look like this below 
 
 
Category title
Category title
etc.. etc..

您正在内部循环中创建所有内容，因此对于每个链接，您将创建一个新项目，标题等。

links.Category.results也是一个数组，你可以这样检查： links.Category.results == category 。 要检查Category.results是否包含category字符串，您应该使用indexOf（） （或includes（） ，但它具有更差的浏览器支持）。

这是一个固定的片段： 

 var links = [{ "__metadata": { "id": "", "uri": "http://www.whatever.com" }, "Id": 01, "Title": "Link 01 - test category 01", "Link": "https://www.google.com", "Category": { "__metadata": { "type": "" }, "results": [ "Test Category 01" ] }, "Image": null, "ID": 01 }, { "__metadata": { "id": "", "uri": "http://www.whatever.com", "etag": "", "type": "" }, "Id": 02, "Title": "Link 02 - test category 01", "Link": "https://www.google.com", "Category": { "__metadata": { "type": "" }, "results": [ "Test Category 01" ] }, "Image": null, "ID": 02 }, { "__metadata": { "id": "", "uri": "http://www.whatever.com", "etag": "", "type": "" }, "Id": 03, "Title": "Link 01 - test category 02", "Link": "https://www.google.com", "Category": { "__metadata": { "type": "" }, "results": [ "Test Category 02" ] }, "Image": null, "ID": 209 }, { "__metadata": { "id": "", "uri": "http://www.whatever.com", "etag": "", "type": "" }, "Id": 210, "Title": "Link 02 - test category 02", "Link": "https://www.somerandomdomain.com", "Category": { "__metadata": { "type": "" }, "results": [ "Test Category 02" ] }, "Image": null, "ID": 210 } ] //category arr var categoryArr = [ "Test Category 01", "Test Category 02", "Test Category 03" ] var categoryTitle; var menu = $("#output2"); $.each(categoryArr, function(catIndex, category) { // DOM ELEMENTS var $item = $('
').addClass('navContainer'); var $title = $('
').addClass('title').appendTo($item); var $links = $('
 
 .navContainer { border: 1px solid grey; margin: 10px; padding: 5px; } .links ul li { list-style-type: none; } 
  
 
  
 Result should look like this below 
 
 
Category title
 
  
 
 
 
Category title

首先分配链接，然后执行UI内容。 

 var links = [ { "__metadata": { "id": "", "uri": "http://www.whatever.com" }, "Id": 01, "Title": "Link 01 - test category 01", "Link": "https://www.google.com", "Category": { "__metadata": { "type": "" }, "results": [ "Test Category 01" ] }, "Image": null, "ID": 01 }, { "__metadata": { "id": "", "uri": "http://www.whatever.com", "etag": "", "type": "" }, "Id": 02, "Title": "Link 02 - test category 01", "Link": "https://www.google.com", "Category": { "__metadata": { "type": "" }, "results": [ "Test Category 01" ] }, "Image": null, "ID": 02 }, { "__metadata": { "id": "", "uri": "http://www.whatever.com", "etag": "", "type": "" }, "Id": 03, "Title": "Link 01 - test category 02", "Link": "https://www.google.com", "Category": { "__metadata": { "type": "" }, "results": [ "Test Category 02" ] }, "Image": null, "ID": 209 }, { "__metadata": { "id": "", "uri": "http://www.whatever.com", "etag": "", "type": "" }, "Id": 210, "Title": "Link 02 - test category 02", "Link": "https://www.somerandomdomain.com", "Category": { "__metadata": { "type": "" }, "results": [ "Test Category 02" ] }, "Image": null, "ID": 210 } ] //category arr var categoryArr = [ "Test Category 01", "Test Category 02", "Test Category 03" ] var categories = categoryArr.map(function(label){ var category = {} category.label = label category.links = [] for(var i in links){ if(links[i].Category.results.indexOf(label)!=-1) category.links.push(links[i]) } return category }) var menu = $("#output2"); $.each(categories, function (catIndex, category) { var item = $('
').addClass('navContainer'), title = $('
'), linklist = $('
 
 .navContainer { border: 1px solid grey; margin: 10px; padding:5px; } .links ul li { list-style-type:none; } a{ display: block; } 
  
 
  
 Result should look like this below 
 
 
Category title
Category title

Interesting Posts

用于元素类型和类名的Jquery选择器？

隐藏源CSS代码

右键单击时如何关闭/删除菜单项或标签？

CodeIgniter中的jQuery，在视图内部还是在外部js文件中？

选择2自动触发事件更改

正则表达式搜索html返回，但不是实际的html jQuery

仅在某些屏幕分辨率下包含php文件

如何使用$ .each将多个文件输入附加到FormData对象？

在JQuery中查找节点的成本是多少？

KendoUI – ListView – 如何在编辑模板中在运行时显示动态控件