Showing Result From Array Once Then Looping Through Second Array

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

Solution 1:

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 arrvar categoryArr = [
  "Test Category 01",
  "Test Category 02",
  "Test Category 03"
]

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

$.each(categoryArr, function(catIndex, category) {
  // DOM ELEMENTSvar $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;
}

.linksulli {
  list-style-type: none;
}

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

Solution 2:

Assign the links first and then do the UI stuff.

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 arrvar 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 = $('<div>').addClass('navContainer'),
		title = $('<h4>'),
		linklist = $('<ul>')

	title.text(category.label)

	$.each(category.links, function(linkIndex, link) {

		var li = $('<li>')

		// ADD LINK
		$('<a>').attr('href',link.Link)
		.text(link.Title)
		.appendTo(li);

		li.appendTo(linklist)
	
	})

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

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

.navContainer {
  border: 1px solid grey;
  margin: 10px;
  padding:5px;
}
.linksulli { 
  list-style-type:none;
}
a{
  display: block;
 }

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