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

时间：2018-05-23 17:07:13

标签： javascript jquery

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

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

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

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

＆＃13;
＆＃13; 
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 = $('<div>').addClass('navContainer'),
                    title = $('<h4>'),
                    info = $('<p>'),
                    link = $('<a>');
                    
								// CATEGORY TITLE

                info.text(categoryArr[catIndex]); // not showing once per iteration.

                // ADD LINKS
                link.attr('href',links.Link)
                .text(links.Title)
                .appendTo(title);

                // ADD EVERYTHING
                item.append(info,title);

                // DISPLAY TO CONTAINER
                item.appendTo(menu);
           }
        
    	})// end glinks


    }) // end categoryArr
＆＃13; 
.navContainer {
  border: 1px solid grey;
  margin: 10px;
  padding:5px;
}
.links ul li { 
  list-style-type:none;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output2"></div>
<hr>
<!-- result should be like this -->
<h5>
 Result should look like this below
</h5>
<div class="navContainer">
  <div class="title">Category title</div>
  <div class="links">
  <ul>
  <li><a href="#">http://www.google.com</a></li>
  <li><a href="#">http://www.google.com</a></li>
  <li><a href="#">http://www.google.com</a></li>
  </ul>
  </div>
</div>  
</div>

<div class="navContainer">
  <div class="title">Category title</div>
  <div class="links">
  <ul>
  <li><a href="#">http://www.google.com</a></li>
  <li><a href="#">http://www.google.com</a></li>
  <li><a href="#">http://www.google.com</a></li>
  </ul>
  </div>
</div>  
</div>

etc.. etc..
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：3)

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

此外，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 = $('<div>').addClass('navContainer');
  var $title = $('<div>').addClass('title').appendTo($item);
  var $links = $('<ul>').appendTo(
    $('<div>').addClass('links').appendTo($item)
  );

  // CATEGORY TITLE
  $title.text(category);

  $.each(links, function(linkIndex, link) {
    var $link = $('<a>');

    if (link.Category.results.indexOf(category) != -1) {
      // ADD LINKS
      $link.attr('href', link.Link)
        .text(link.Title)
        .appendTo($('<li>').appendTo($links));
    }

  }) // end glinks

  // DISPLAY TO CONTAINER
  $item.appendTo(menu);
}) // end categoryArr
.navContainer {
  border: 1px solid grey;
  margin: 10px;
  padding: 5px;
}

.links ul li {
  list-style-type: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output2"></div>
<hr>
<!-- result should be like this -->
<h5>
  Result should look like this below
</h5>
<div class="navContainer">
  <div class="title">Category title</div>
  <div class="links">
    <ul>
      <li><a href="#">http://www.google.com</a></li>
      <li><a href="#">http://www.google.com</a></li>
      <li><a href="#">http://www.google.com</a></li>
    </ul>
  </div>
</div>

<div class="navContainer">
  <div class="title">Category title</div>
  <div class="links">
    <ul>
      <li><a href="#">http://www.google.com</a></li>
      <li><a href="#">http://www.google.com</a></li>
      <li><a href="#">http://www.google.com</a></li>
    </ul>
  </div>
</div>

答案 1 :(得分：2)

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output2"></div>
<hr>
<!-- result should be like this -->
<h5>
 Result should look like this below
</h5>
<div class="navContainer">
  <div class="title">Category title</div>
  <div class="links">
  <ul>
  <li><a href="#">http://www.google.com</a></li>
  <li><a href="#">http://www.google.com</a></li>
  <li><a href="#">http://www.google.com</a></li>
  </ul>
  </div>
</div>  
</div>

<div class="navContainer">
  <div class="title">Category title</div>
  <div class="links">
  <ul>
  <li><a href="#">http://www.google.com</a></li>
  <li><a href="#">http://www.google.com</a></li>
  <li><a href="#">http://www.google.com</a></li>
  </ul>
  </div>
</div>  
</div>
{{1}}
{{1}}

相关问题
最新问题