时间戳

首页 > 解决方案 > 查找不在第二个数组中的数组值并附加文本

javascript - 查找不在第二个数组中的数组值并附加文本

问题描述

我已经取得了一些进展，但是我仍然遇到与链接相关联的类别中没有链接，无论我在下面尝试了什么，它也会显示在循环的第二次迭代中。有什么我可以添加或我的代码中缺少的东西吗？

var gLinks = [
  {
    "__metadata": {
      "id": "22",
      "uri": "http://www.whatever.com",
      "etag": "\"3\"",
      "type": "SP.Data.LinksListItem"
    },
    "Id": "207",
    "Title": "Link 01 - test category 01",
    "Link": "https://www.google.com",
    "Category": {
      "__metadata": {
        "type": "Collection(Edm.String)"
      },
      "results": [
        "Test Category 01"
      ]
    },
    "Image": null,
    "ID": 207
  },
  {
    "__metadata": {
      "id": "22",
      "uri": "http://www.whatever.com",
      "etag": "\"3\"",
      "type": "SP.Data.LinksListItem"
    },
    "Id": "207",
    "Title": "Link 03 - test category 02",
    "Link": "https://www.google.com",
    "Category": {
      "__metadata": {
        "type": "Collection(Edm.String)"
      },
      "results": [
        "Test Category 02"
      ]
    },
    "Image": null,
    "ID": 207
  },
  {
    "__metadata": {
      "id": "99",
      "uri": "http://www.whatever.com",
      "etag": "\"1\"",
      "type": "SP.Data.LinksListItem"
    },
    "Id": 208,
    "Title": "Link 02 - test category 01",
    "Link": "https://www.google.com",
    "Category": {
      "__metadata": {
        "type": "Collection(Edm.String)"
      },
      "results": [
        "Test Category 01"
      ]
    },
    "Image": null,
    "ID": 208
  },
  {

    "__metadata": {
      "id": "67",
      "uri": "http://www.whatever.com",
      "etag": "\"1\"",
      "type": "SP.Data.LinksListItem"
    },
    "Id": "209",
    "Title": "Link 01 - test category 02",
    "Link": "https://www.google.com",
    "Category": {
      "__metadata": {
        "type": "Collection(Edm.String)"
      },
      "results": [
        "Test Category 02"
      ]
    },
    "Image": null,
    "ID": "209"
  },
  {
    "__metadata": {
      "id": "73",
      "uri": "http://www.whatever.com",
      "etag": "\"2\"",
      "type": "SP.Data.LinksListItem"
    },
    "Id": 210,
    "Title": "Link 02 - test category 02 - somedmain",
    "Link": "https://www.somerandomdomain.com",
    "Category": {
      "__metadata": {
        "type": "Collection(Edm.String)"
      },
      "results": [
        "Test Category 05"
      ]
    },
    "Image": null,
    "ID": 210
  }
]

//category arr
var categoryArr = [
  "Test Category 01",
  "Test Category 02",
  "Test Category 03",
  "Test Category 04",
  "Test Category 05",
  "Test Category 06"
]

var categoryTitle;
var menu = $("#output2");
var flag = false;

$.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);
  
  // CATEGORY HAS NO TITLE
  if(flag == true) { 
    var $link = $('<a>');
    //alert(category + " has no links");
    $link.attr('href', "#")
          .text("There are no links associated with this category")
          .appendTo($('<li>').appendTo($links));
	}

  $.each(gLinks, function(linkIndex, link) {
 
    var $link = $('<a>');
 
		// IF CATEGORY IN LINK MATCHES A CATEGORY
    if (link.Category.results.indexOf(category) != -1 && this.category != link.Category.results) {
	    // ADD LINKS
      $link.attr('href', link.Link)
        .text(link.Title)
        .appendTo($('<li>').appendTo($links));

    } else {
    	flag = true;
    }
 
  }) 

  // DISPLAY TO CONTAINER
  $item.appendTo(menu);
}) 
.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>

这是上一篇文章的遗留问题：Showing result from array once then looping through second array

我一直在努力为每个没有任何链接的类别只显示一次文本。

这是我可以确定解决此问题的唯一方法，方法是首先循环链接并识别任何与类别无关的内容，然后将值向上推以关联下面的第二个循环上没有链接。

添加 return false 会停止循环，这不是我想要的，但添加的目的是为了显示无法将类别附加到推送到数组的数据中，以显示一些没有与类别关联的链接的文本.

var gLinks = [
  {
    "__metadata": {
      "id": "22",
      "uri": "http://www.whatever.com",
      "etag": "\"3\"",
      "type": "SP.Data.LinksListItem"
    },
    "Id": "207",
    "Title": "Link 01 - test category 01",
    "Link": "https://www.google.com",
    "Category": {
      "__metadata": {
        "type": "Collection(Edm.String)"
      },
      "results": [
        "Test Category 01"
      ]
    },
    "Image": null,
    "ID": 207
  },
  {
    "__metadata": {
      "id": "99",
      "uri": "http://www.whatever.com",
      "etag": "\"1\"",
      "type": "SP.Data.LinksListItem"
    },
    "Id": 208,
    "Title": "Link 02 - test category 01",
    "Link": "https://www.google.com",
    "Category": {
      "__metadata": {
        "type": "Collection(Edm.String)"
      },
      "results": [
        "Test Category 01"
      ]
    },
    "Image": null,
    "ID": 208
  },
  {

    "__metadata": {
      "id": "67",
      "uri": "http://www.whatever.com",
      "etag": "\"1\"",
      "type": "SP.Data.LinksListItem"
    },
    "Id": "209",
    "Title": "Link 01 - test category 02",
    "Link": "https://www.google.com",
    "Category": {
      "__metadata": {
        "type": "Collection(Edm.String)"
      },
      "results": [
        "Test Category 02"
      ]
    },
    "Image": null,
    "ID": "209"
  },
  {
    "__metadata": {
      "id": "73",
      "uri": "http://www.whatever.com",
      "etag": "\"2\"",
      "type": "SP.Data.LinksListItem"
    },
    "Id": 210,
    "Title": "Link 02 - test category 02",
    "Link": "https://www.somerandomdomain.com",
    "Category": {
      "__metadata": {
        "type": "Collection(Edm.String)"
      },
      "results": [
        "Test Category 02"
      ]
    },
    "Image": null,
    "ID": 210
  }
]

//category arr
var categoryArr = [
  "Test Category 01",
  "Test Category 02",
  "Test Category 03",
  "Test Category 04"
]

// output
var menu = $("#output2");

// CHECK FOR LINKS WITHOUT CATEGORIES FIRST
// loop through all links first
    $.each(gLinks, function(index, link) {
      //no category associated with a link
  	 if (categoryArr != link.Category.results) {
      	// show no link present text under category title
				var sorryText = {"Link": "#", 
													"Title":"No links for this category",
                          "Category": {
                                "__metadata": {
                                  "type": "Collection(Edm.String)"
                                },
                                "results": [
                                  "Test Category 03" // need to make this dynamic
                                ]
                              }
    											}
        gLinks.push(sorryText);
        return false;
      }      

  })


// BUILD NAVIGATION
$.each(categoryArr, function(catIndex, category) {

  // DOM ELEMENTS
  var $item = $('<div>').addClass('navContainer'),
      $title = $('<div>').addClass('title').appendTo($item),
      $links = $('<ul>').appendTo(
    $('<div>').addClass('links').appendTo($item)
  );

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

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

		// IF CATEGORY IN LINK MATCHES A CATEGORY
    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>

标签： javascriptjqueryarrays

解决方案

推荐阅读