I've made some progress however I am still encountering the no links in categories that have a link associated with it, and no matter what I've tried below, it also shows up for the second iteration of the loop. Is there something I can add or I am missing in my code?
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>This is a carry over question from a previous post: Showing result from array once then looping through second array
I have been working to display text only once for each category that does not have any links associated with them.
This is the only way I could ascertain to work around this problem by first looping over the links and identifying any that were not associated to a category then pushing a value up to associate that there is no link on the second loop underneath.
Adding return false stops the looping which isn't what I wanted but added for the purpose of showing the inability to append the category to the data pushed to the array in order to show some text that there isn't any link associated with a category.
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>