We Keep Coding

Template loop gives duplicate keys warning

<template v-for="errors in validationErrors">
<li v-for="(error, index) in errors" :key="index">{{ error }}</li>
</template>
The above code throws:
Duplicate keys detected: '0'. This may cause an update error
If I remove index from the inner loop and assign error to key then there is no warning, however that just seems wrong.
Any way to not have this warning when using templates?

You could use this instead:
<template v-for="(errors, outerIndex) in validationErrors">
<li v-for="(error, index) in errors" :key="outerIndex + '-' + index">
{{ error }}
</li>
</template>
Explanation
Without unique information from the outer loop, the inner loop key will use the same set every time, so you end up with duplicates. Ex. if you had two outer loops with 3 items each, you'd get this:
<li key="0">...</li>
<li key="1">...</li>
<li key="2">...</li>
<li key="0">...</li>
<li key="1">...</li>
<li key="2">...</li>
By using an outerIndex too, you maintain uniqueness in the inner elements:
<li key="0-0">...</li>
<li key="0-1">...</li>
<li key="0-2">...</li>
<li key="1-0">...</li>
<li key="1-1">...</li>
<li key="1-2">...</li>

Accessing another array by index

My data are in the form:
data = { arr_id:[0,2,5], arr_description:["description 0","description 2","description 5"]}
My template
<script id="tmp" type="text/x-jsrender">
<ul>
{{for arr_id}}
<li>id: {{>}} **I NEED THIS->** {{:agg_desc[#Index]}} </li>
{{/for}}
</ul>
</script>
The arrays arr_id arr_description maps same data (the one with an ID the latter with a description) I want to iterate over the first one and use the #index to access the second one.

You need to pass in the arr_description array to the inner context.
Here are some relevant links:
Accessing parent data
Contextual parameters
For example, you can do this:
{{for arr_id ~arr_desc=arr_description}}
<li>id: {{>}} {{:~arr_desc[#index]}} </li>
{{/for}}
or this:
{{for arr_id}}
<li>id: {{>}} {{:~root.arr_description[#index]}} </li>
{{/for}}

How to iterate an object with a specific key in angularjs?

I want to list an item inside a specific key using a filter. Now listing like this.
Sanal
Jin
John
Tim
Jeff
Sam
John
Tim
I want like this using a filterJeffSam
Here is the Fiddle
function testCtrl($scope) {
$scope.items = {"id":"B716","day":8,"di":{"type":"normal","one":[{"name":"Sanal","age":"18"},{"name":"Jin","age":"25"}],"two":[{"name":"Jeff","age":"55"},{"name":"Sam","age":"32"}],"three":[{"name":"John","age":"34"},{"name":"Tim","age":"39"}]}};
}
<div ng-app="" ng-controller="testCtrl">
<ul>
<li ng-repeat="val in items.di">
<ul>
<li ng-repeat="value in val">{{value.name}}</li>
</ul>
</li>
</ul>
</div>

in your ng repeat change it as
<li ng-repeat="value in val | filter: val.name='jeff'">{{value.name}}</li>
I have used name you can use the value that you want ot test

Filter matched elements by class name in Angular js.

Problem:
I have an unordered list of items which are returned from a json call and are output using ng-repeat. Each one of these items has a class name (there are about 9 categories).
I have a second unordered list which is simply a list of available categories.
Aim:
I want to be able to select one of the categories in the right hand list, which will apply a filter to the actual list of returned elements. This should be activated via a toggle (so click once: filtered, click again: filter removed). So it is simply looking to match the classname in the clicked element, to the elements that share the same classname in the list of json data.
I cannot use ng-model (as this is reserved for certain form elements).
For my jsfiddle I am simply using static html.
Here is my angular code:
/* angular custom filter on returned ajax api data */
var app = angular.module('app', []);
app.controller('main', function($scope) {
$scope.chFilters = {};
$scope.links = [
{name: 'atm'},
{name: 'internet'},
{name: 'mobile'},
{name: 'sms'},
{name: 'postal'}
];
$scope.channels = ["ATM", "INTERNET", "SMS", "POSTAL","MOBILE"];
});
(this is based on another question I found on SO). Unfortunately the fiddle is a bit messy and has some extraneous code in it.
HTML:
<div ng-app="app">
<div ng-controller="main">
<ul>
<li class="atm">Some stuff ATM</li>
<li class="internet">Some stuff INTERNET</li>
<li class="sms">Some stuff ATM</li>
<li class="atm">Some stuff ATM</li>
<li class="postal">Some stuff POSTAL</li>
<li class="atm">Some stuff ATM</li>
<li class="internet">Some stuff INTERNET</li>
<li class="postal">Some stuff POSTAL</li>
<li class="postal">Some stuff POSTAL</li>
<li class="atm">Some stuff ATM</li>
<li class="sms">Some stuff SMS</li>
<li class="mobile">Some stuff MOBILE</li>
<li class="internet">Some stuff INTERNET</li>
<li class="mobile">Some stuff MOBILE</li>
</ul>
<ul class="channel-filters">
<li ng-repeat="link in links | filter:chFilters" class="{{link.name | lowercase}}"><a ng-click="chFilters.name = link.name">{{link.name | uppercase}}</a></li>
<li class="last" ng-click="chFilters.name = ''">CLEAR FILTER</li>
</ul>
<ul>
<li ng-repeat="channel in channels | filter:chFilters">
<strong>{{channel}}</strong>
<a ng-click="chFilters = channel">{{channel}}</a>
</li>
</ul>
<!-- original -->
<ul>
<li ng-repeat="link in links | filter:chFilters">
<strong>{{link.name}}</strong>
<a ng-click="chFilters.name = link.name">{{link.name}}</a>
</li>
</ul>
</div>
</div>
This is the actual HTML from the application (with the call to the api).
<ul class="accordion">
<li class="search-text-channel">
<input type="textarea" ng-model="searchTextChannel.$" placeholder="Search"/>
</li>
<li ng-repeat="day in interactions.model.byDay | filter:searchTextChannel" ng-click="hidden = !hidden" ng-init="hidden = false" class="{{day.channel | removeSpace | lowercase}}" ng-class="{'closed': !hidden, 'open': hidden}">
<span class="date">{{day.date}}</span>
<span class="subheading">{{day.channel}}</span>
<ul ng-show="hidden">
<li ng-repeat="interaction in day.interactions">
{{interaction.time}} {{interaction.description | removeUnderscore}}
</li>
</ul>
</li>
<li class="load-more">
<i class="fa fa-plus"></i>LOAD MORE
</li>
</ul>
I have managed to recreate this functionality in jquery, but I think it would be better to implement an angular solution in an angular application.
I've tried researching and also attempted to implement show/hide as well as a custom filter, but so far no joy.
Here is my (messy) jsfiddle

<ul>
<li ng-repeat="channel in channels | filter:chFilters.name">
<strong>{{channel}}</strong>
<a ng-click="chFilters = channel">{{channel}}</a>
</li>
</ul>
<!-- original -->
<ul>
<li ng-repeat="link in links | filter:chFilters.name">
<strong>{{link.name}}</strong>
<a ng-click="chFilters.name = link.name">{{link.name}}</a>
</li>
</ul>
Update Plunker
Let me know if you have any question on this.

Here is part of the solution:
Suppose your items look like this:
$scope.items = [
{ class: "atm", label: "Some stuff ATM" },
{ class: "internet", label: "Some stuff INTERNET" },
{ class: "sms", label: "Some stuff SMS" },
{ class: "postal", label: "Some stuff POSTAL" },
...
];
To show a filtered list (only filtering by a single channel for now): create a separate list in the scope, with the filters applied:
$scope.click = function(name) {
$scope.chFilters.name = name;
$scope.filteredItems = $scope.items.filter(function(item) {
return item.class === $scope.chFilters.name;
});
};
Call this click handler from the bottom list:
...<a ng-click="click(link.name)">{{link.name | uppercase}}</a>....
And show filteredItems in the top list:
<ul>
<li ng-repeat="item in filteredItems" ng-class="item.class">{{item.label}}</li>
</ul>
So this is really just a starting point, it should be extended to handle multiple filters, etc...

jQuery UI Sortable does not serialize/toArray child elements

I have the following list and when I call toArray or serialize it only offers me the parent <li>. I am trying to get hold of the whole hierarchy so I can store this information into a self referencing heirachy table in the database. The result here shows item_1,q_6,a_7,g_8. Where is item_3,item_4,item_5.
Thanks
<div id="example5">
<ul>
<li id="item_1">Item 1
<ul id="item_2">
<li id="item_3">Item 1 1<ul></ul></li>
<li id="item_4">Item 1 2<ul></ul></li>
<li id="item_5">Item 1 3<ul></ul></li>
</ul>
</li>
<li id="q_6">Item 2<ul></ul></li>
<li id="a_7">Item 3<ul></ul></li>
<li id="g_8">Item 4<ul></ul></li>
</ul>
</div>
<button id="fred">Click</button>
$("#fred").click(function () {
//var result = $('#example5 ul').sortable('toArray');
var result = $('#example5 ul').sortable('serialize'); //Neither work
alert(result);
});

As far as I can tell there's no default way of serializing nested sortable lists in jquery UI.
The best way to do it is to go through every child of "#example5 ul" and build your own structure (I would recommend JSON in this case) to be send to the server.