一次显示数组的结果，然后遍历第二个数组 [英] Showing result from array once then looping through second array

查看：56
本文介绍了一次显示数组的结果，然后遍历第二个数组的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有两个数组，用于用一些静态数据模拟两个不同的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 = $('<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 

 .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>

<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..

解决方案

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

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>

I have two arrays that I am using to simulate two different REST call's JSON response for the time with some static data. One to get the available active categories and another to get all links and then search to find what links go with what category.

The goal here is to build out a navigation that will take each category and display the corresponding links underneath each.

Currently I am unable to get the category to display only once and above the links related to each category then draw the output to the dom once complete.

I tried to use $.one but that did not work. Does anyone have any pointers or suggestions to nudge me in the right direction?

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

.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>

<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..

解决方案

You are creating everything inside your inner loop, so for each link you are creating a new item, title, etc.

Also the links.Category.results is an array, whilst you check it as so: links.Category.results == category. To check whether the Category.results contains the category string, you should use indexOf() (or includes(), but it has worse browser support).

Here's a fixed snippet:

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>

这篇关于一次显示数组的结果，然后遍历第二个数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆