We Keep Coding

ng-repeat and ng-if syntax for arrays within arrays

I have an array within an array and I'm having some issues with ng-repeats and ng-ifs. My array looks something like this:
data.stage = [];
task_obj = {};
data.stage.push({
workflow_stage: wf.getDisplayValue('name'),
task: []
});
task_obj.number = userTasks.getValue('number');
task_obj.parent = userTasks.getValue('parent');
task_obj.state = userTasks.getValue('state');
task_obj.url = userTasks.getDisplayValue('url');
task_obj.incompleteCounter = incompleteCounter;
task_obj.icon = icon;
task_obj.status = status;
task_obj.style = style;
task_obj.short_description = userTasks.getValue('short_description');
task_obj.bundle_name = bundle.getValue('bundle_name');
task_obj.workflow = bundle.getDisplayValue('workflow');
task_obj.workflow_stage = bundle.getDisplayValue('workflow_stage');
for(var a=0; a < data.stage.length; a++){
if(bundle.getDisplayValue('workflow_stage') == data.stage[a].workflow_stage) {
data.stage[a].task.push(task_obj);
}
}
}
If I have an ng-repeat that looks like ng-repeat="item in data.stage track by $index", how would I access the short_description for example? Would it be like {{item.task.short_description}}?
Similarly, if I wanted to write an ng-if where bundle_name is "MyBundle", how would I write it? I've tried ng-if="item.task.bundle_name=='MyBundle'", but it obviously doesn't work.
Can anyone guide me on the correct syntax?

You need to use ng-repeat for task also
<div ng-repeat=ng-repeat="item in data.stage track by $index">
<div ng-repeat=ng-repeat="task in item.task track by $index">
<div ng-if="task.bundle_name == 'MyBundle' ">
My bundle condition
</div>
<span>{{task.short_description}}</span>
</div>
</div>

Apply CSS styling to a mapped item

I have a list of items that are checkboxes for a settings page. These are stored in a const items like so:
const ITEMS = [
["youtube", "YouTube"],
["videos", "Videos"],
["facebook", "Facebook"],
["settings", "Settings"],
]
and currently, these four items are just listed as list items. What I have right now is this:
but what I want is this:
I was thinking of applying a check to see if the sub-category belongs to that parent category, and apply some type of indentation to the sub-categories. Is that possible to do through a map (which is how I'm iterating through this array)? Or is there a smarter, more efficient way to solve this issue?
Here's how I render my checkboxes:
item: function(i) {
return (
<div className="checkbox">
<label>
<input type="checkbox" checked={this.state.items[i[0]]}/>
{i[1]}
</label>
</div>
)
}
render: function() {
return (
<div className="col-sm-12">
{_(ITEMS).map(this.item, this)}
</div>
)
}

I would recommend you to use objects in an array. So you're able to map more than just property to each item. For accessing it only with normal Javascript I would use a for-Loop because of its compability with older browsers. An example I made, can be found here:
https://jsfiddle.net/morrisjdev/vjb0qukb/

With some 'dirty' code, you could use this: https://jsfiddle.net/1sw1uhan/
const ITEMS = [
["youtube", "YouTube"],
["videos", "Videos"],
["facebook", "Facebook"],
["settings", "Settings"],
]
var list = $('<ul>');
$.each(ITEMS, function( index, value ) {
if ((index+1)%2 == 0 && index != 0){
var sublist = $('<ul>').append($('<li>').text(value[1]).attr('id', value[0]));
} else {
var sublist = $('<li>').text(value[1]).attr('id', value[0]);
}
list.append(sublist);
})
$('#somediv').append(list);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="somediv">
</div>

How to display and count entities from an object array from a json using angularJS?

I want want to display and count only batter in batters at index 0.
i.e id = 1001 type = regular
and count should be "4"

Maybe this updated JSFiddle will give you an idea.
HTML
<div ng-app="myApp" ng-controller="customersCtrl">
<ul ng-repeat="x in myData">
<li ng-repeat = "batter in x.batters.batter | filter: {'id': 1001, 'type': 'Regular'}">
{{ batter.id }} - {{ batter.type }}
</li>
</ul>
{{countBatters(1001, 'Regular')}}
</div>
Added function in controller:
$scope.countBatters = function(id, type) {
return $scope.myData.filter(function(obj) {
var batter = obj.batters.batter[0];
return batter.id == id && batter.type == type
}).length;
}

Use array filter method..
var getBatter1001 = (item) => { return item.batters.batter.filter((x) => {x.id === '1001'}); }
var batter1001 = $scope.myData.filter(getBatter1001);
console.log('Count of objects with batter id 1001: '+batter1001.length); // Logs 3

Javascript Pushing Objects to Array

I'm unable to push objects to an array and i can't figure out why. At the moment, the result (records) repeats the last instance of the each loop.
JSFiddle
HTML
<div data-provider="prv1"></div>
<div data-rating="rtn1"></div>
<div data-price="prc1"></div>
<div data-provider="prv2"></div>
<div data-rating="rtn2"></div>
<div data-price="prc2"></div>
<div data-provider="prv3"></div>
<div data-rating="rtn3"></div>
<div data-price="prc3"></div>
<div data-provider="prv4"></div>
<div data-rating="rtn4"></div>
<div data-price="prc4"></div>
Javascript (w/ jQuery)
(function(){
var sort = $(".sort select");
var provider = $("[data-provider]");
var rating = $("[data-rating]");
var price = $("[data-price]");
var records = [];
var record = {};
$(provider).each(function(index, value){
record.provider = $(provider).eq(index).data("provider");
record.rating = $(rating).eq(index).data("rating");
record.price = $(price).eq(index).data("price");
records[index] = record;
});
})();

In your loop you set each index to be equal to record. Since the scope of record is the anonymous function, it will be the same object for each index.
What you want is for the scope to be the function provided to .each
Like this fiddle
$(provider).each(function(index, value){
var record = {};
...
});

modify the data-donut attribute of the divs from javascript

My javascript
var currentMonth= new Date().getMonth();
if (demo.length >= currentMonth){
var d3data = demo[currentMonth];
// output will be ["23", "19"]
now i need to update output values to #donut and #donut1 (data-donut="")
values are coming from json it may change according to month
for reference i have added FIDDLE
http://jsfiddle.net/Qh9X5/3166/
<div class="zipper">
<div class="current">
<div class="title_text">current</div>
<div id="donut" data-donut="42"></div>///here in the data-donut value
</div>
<div class="target">
<div class="title_text">Target</div>
<div id="donut1" data-donut="62"></div>
</div>
</div>
Any help is Appreciated

You can use this to assign the values from the array (assuming the array is the result after parsing it from json)
var d3data = demo[currentMonth];
// assuming that this results in d3data = ["23", "19"];
$(document).ready(function() {
$("div[data-donut]").each(function(i) {
$(this).attr('data-donut', d3data[i]);
});
});
The first value of the array will be assigned to the first div and the second value to the second one.
See JSFiddle

Looks like you want to modify the data-donut attribute of the divs. Hope this will help
document.getElementsById("donut").setAttribute("data-donut","<your value>");
document.getElementsById("donut1").setAttribute("data-donut","<your value>");

This will work
obj = ["23", "19"];
var keys = Object.keys(obj);
for (var i = 0,j=1; i < keys.length; i++,j++) {
var val = obj[keys[i]];
document.getElementById("donut"+j).setAttribute("data-donut", val);
}
<div class="zipper">
<div class="current">
<div class="title_text">current</div>
<div id="donut1" data-donut="42"></div>///here in the data-donut value
</div>
<div class="target">
<div class="title_text">Target</div>
<div id="donut2" data-donut="62"></div>
</div>
</div>

This is not json format ["23", "19"]
e.g this is an array
var d3data = ["23", "19"];
$('#donut').data('donut', d3data[0]);
$('#donut1').data('donut',d3data[1]);