We Keep Coding

Programmatically push values into an empty object

Is there a way to push values into an empty object? I have here is a list of countries displaying the country name and population. I want to insert those values into an object much like the example below.
<ul class="countries">
<li class="country">
<span class="country-name">Philippines</span>
<span class="country-population">200</span>
<span class="description">Blablabla</span>
</li>
<li class="country">
<span class="country-name">Brunei</span>
<span class="country-population">200</span>
<span class="description">Blablabla</span>
</li>
<li class="country">
<span class="country-name">Malaysia</span>
<span class="country-population">400</span>
<span class="country-population">Blablabla</span>
</li>
</ul>
var countries = [
{name: "Philippines", population: 200, description: "Blablabla"},
{name: "Brunei", population: 200, description: "Tatatata"},
{name: "Malaysia", population:4100, description: 'Zzazazaza'}
]
0: {name: "Philippines", population: 200, description: "Blablabla"}
1: {name: "Brunei", population: 200, description: "Tatatata"}
2: {name: "Malaysia", population: 400, description: "Zzazazaza"}
I tried the script below but only inserts the name of the country. How can also insert the population and description values?
var countries_new = [];
$('.countries > .country > .country-name').each(function() {
countries_new.push({
name: $(this).text()
});
});

You can use find() to get the reference of each context inside the loop. Also notice that + which is prefixed to change that text to a number type. You can also use parseInt() there. Using trim() will be helpful to remove extra leading and trailing whitespaces in the objects.
var countries = [];
$('.countries .country').each(function(){
var countryRef = $(this);
countries.push({
name: countryRef.find('.country-name').text().trim(),
population: +(countryRef.find('.country-population').text().trim()),
description: countryRef.find('.description').text().trim()
});
});
console.log(countries);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="countries">
<li class="country">
<span class="country-name">Philippines</span>
<span class="country-population">200</span>
<span class="description">Blablabla</span>
</li>
<li class="country">
<span class="country-name">Brunei</span>
<span class="country-population">200</span>
<span class="description">Blablabla</span>
</li>
<li class="country">
<span class="country-name">Malaysia</span>
<span class="country-population">400</span>
<span class="country-population">Blablabla</span>
</li>
</ul>

Loop over the .country elements instead, then find the elements within each .country with the other information. As per mock array, population seems to be a number and text() returns string, use Number() to convert it.
var countries_new = [];
$('.countries > .country').each(function() {
countries_new.push({
name: $(this).find(".country-name").text(),
population: Number($(this).find(".country-population").text()),
description: $(this).find(".description").text()
});
});
console.log(countries_new);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="countries">
<li class="country">
<span class="country-name">Philippines</span>
<span class="country-population">200</span>
<span class="description">Blablabla</span>
</li>
<li class="country">
<span class="country-name">Brunei</span>
<span class="country-population">200</span>
<span class="description">Blablabla</span>
</li>
<li class="country">
<span class="country-name">Malaysia</span>
<span class="country-population">400</span>
<span class="description">Blablabla</span>
</li>
</ul>

You don't need jQuery for this, just select all countries and from that element select the values you want:
console.log(
[...document.querySelectorAll('.countries>.country')].map(
(el) => ({
name: el.querySelector('.country-name').innerText.trim(),
population: el.querySelector('.country-population')
.innerText.trim(),
description: el.querySelector('.description')
.innerText.trim(),
}),
),
);
<ul class="countries">
<li class="country">
<span class="country-name">Philippines</span>
<span class="country-population">200</span>
<span class="description">P Blablabla</span>
</li>
<li class="country">
<span class="country-name">Brunei</span>
<span class="country-population">200</span>
<span class="description">B Blablabla</span>
</li>
<li class="country">
<span class="country-name">Malaysia</span>
<span class="country-population">400</span>
<span class="description">M Blablabla</span>
</li>
</ul>

Assuming all your span elements have CSS classes starting with country- this would be a generic approach:
const countries = document.querySelectorAll('.country');
const result = [];
for (const country of countries) {
let resEl = {};
[...country.querySelectorAll('span[class^="country-"]')].forEach((span) => resEl[span.className.split('-')[1]] = span.innerText)
result.push(resEl);
}
console.log(result)
<ul class="countries">
<li class="country">
<span class="country-name">Philippines</span>
<span class="country-population">200</span>
<span class="country-description">Blablabla</span>
</li>
<li class="country">
<span class="country-name">Brunei</span>
<span class="country-population">200</span>
<span class="country-description">Blablabla</span>
</li>
<li class="country">
<span class="country-name">Malaysia</span>
<span class="country-population">400</span>
<span class="country-description">Blablabla</span>
</li>
</ul>

You actually not push values into an empty object , you will rather like to create an object and push that object inside an array. So basically you can use array map method which will return an array.
With only javascript you can use document.querySelectorAll which will select all the elements with specified selector( class in this case) .[...] is using spread syntax to convert a live collection to array so that array methods can be use. Here map is an array method. Inside this method create an object and return that
let k = [...document.querySelectorAll('.country')].map(function(curr) {
return {
name: curr.querySelector('.country-name').textContent.trim(),
population: curr.querySelector('.country-population').textContent.trim(),
description: curr.querySelector('.description').textContent.trim()
}
})
console.log(k)
<ul class="countries">
<li class="country">
<span class="country-name">Philippines</span>
<span class="country-population">200</span>
<span class="description">Blablabla</span>
</li>
<li class="country">
<span class="country-name">Brunei</span>
<span class="country-population">200</span>
<span class="description">Blablabla</span>
</li>
<li class="country">
<span class="country-name">Malaysia</span>
<span class="country-population">400</span>
<span class="description">Blablabla</span>
</li>
</ul>

Another approach short but effective.
"use strict";
function _toConsumableArray(a) {
if (Array.isArray(a)) {
for (var b = 0, c = Array(a.length); b < a.length; b++) c[b] = a[b];
return c;
}
return Array.from(a);
}
var results = []
.concat(_toConsumableArray(document.querySelectorAll(".countries>.country")))
.map(function(a) {
return {
name: a.querySelector(".country-name").innerText.trim(),
population: a.querySelector(".country-population").innerText.trim(),
description: a.querySelector(".description").innerText.trim()
};
});
console.log(results);

Pagination shown even though there is no data in angular

Here is my code:
Buttons:
<li ><a data-ng-click="Data1 = true;Data2 = false; search.status = ''" href="">ALL PROJECTS</a></li>
<li ><a data-ng-click="Data2 = true;Data1 = false" href="">NOTIFICATIONS</a></li>
Populated data on click of button:
<ul>
<li ng-show="Data1" dir-paginate="wd in workOrdersList | filter: search.status | filter: search.name | itemsPerPage: 10">
<a href="">
<h4>{{wd.name}}</h4>
</a>
<p>Status: {{wd.status}}</p>
</li>
<li ng-show="Data2">
<div ng-show="!notificationDataDashord.length">
<span>No Notifications</span>
</div>
</li>
</ul>
<dir-pagination-controls auto-hide="true"></dir-pagination-controls>
Inside the controller:
$scope.Data1 = true;
$scope.Data2 = false;
I am using pagination directive from this link:
https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination

Its a problem with the dirpagination that it doesnt update the collections after you load the data again.
See
https://github.com/michaelbromley/angularUtils/issues/208
https://github.com/michaelbromley/angularUtils/issues/137
As a work around obviously
<dir-pagination-controls ng-show="Data1" auto-hide="true"></dir-pagination-controls>

Change list item active bg-color with ng-click

I am a little lost with this issue.
When I click on the - a href tag - i want the li active background color to change to a specific color that I have stored in each object - like so obj.color" = #5c6bc0.
<li ng-repeat="obj in tags" ng-class="{active: obj.id == tagStates.activeItemID}">
<a href ng-click="tagStates.activeItemID = obj.id;">
{{obj.name}}
</a>
</li>
How can I do this? I have tried with ng-style - ng-style="{'active':'background-color': obj.color} but that didn't work.
Thanks

You can do something like
<li ng-repeat="obj in tags" ng-class="{active: obj.id == tagStates.activeItemID}" ng-style={backgroundColor: obj.id == tagStates.activeItemID ? obj.color : ''}">
<a href ng-click="tagStates.activeItemID = obj.id;">
{{obj.name}}
</a>
</li>

angular
.module('app', [])
.controller('Ctrl', function() {
this.tags = [
{ name: 'bob' },
{ name: 'rick' },
{ name: 'dave' }
];
})
<body ng-controller="Ctrl as vm">
<ul>
<li ng-repeat="obj in vm.tags" ng-class="{'active': vm.active == obj.name}">
<a ng-click="vm.active = obj.name">{{obj.name}}</a>
</li>
</ul>
{{vm.active}}
</body>
https://plnkr.co/edit/wvKIUtJIb0AE1vpWDtv9?p=preview

Add ng-class when Click event triggered in AngularJS

i create simple application. And i add rating feature.
I want to change the rating star class when click event is triggered from controller.
In my Controller i check if the rating of object == passed number from view, i return class name active.
After that, i still confused how i pass my return value.
Here is my View
<h3>{{ fruit.title }}</h3>
<div class="rating">
<ul>
<li ng-click="addRating(1,fruit)"><i class="glyphicon glyphicon-star-empty"></i></li>
<li ng-click="addRating(2,fruit)"><i class="glyphicon glyphicon-star-empty"></i></li>
<li ng-click="addRating(3,fruit)"><i class="glyphicon glyphicon-star-empty"></i></li>
<li ng-click="addRating(4,fruit)"><i class="glyphicon glyphicon-star-empty"></i></li>
<li ng-click="addRating(5,fruit)"><i class="glyphicon glyphicon-star-empty"></i></li>
</ul>
</div>
And here is my Controller :
var app = angular.module('totalBuahApp', []);
app.controller('fruitController', function($scope) {
$scope.fruits = [
{
title : 'Fresh Red Apple',
img : 'https://cdn0.iconfinder.com/data/icons/fruits/512/Apple.png',
description : 'Good for your daily consumption.',
price : 15000,
cartQty : 1,
rating : 0
},
{
title : 'Red Grape',
img : 'http://www.freepngimg.com/thumb/grape/4-grape-png-image-download-picture-thumb.png',
description : 'Like a king.',
price : 34000,
cartQty : 1,
rating : 0
}
];
$scope.total = $scope.fruits.length;
$scope.addRating = function(number, fruit) {
fruit.rating = number;
};
$scope.ratingClass = function(number) {
return (number == $scope.rating) ? "active" : "";
};
});
You can check my fullcode in
https://codepen.io/fanjavaid/pen/MaRWgG

Don't duplicate HTML for every star, use ngRepeat with ngClass:
<div class="rating">
<ul>
<li class="glyphicon glyphicon-star-empty"
ng-click="addRating($index + 1, fruit)"
ng-repeat="star in [0, 1, 2, 3, 4]"
ng-class="{active: fruit.rating >= $index + 1}"></li>
</ul>
</div>
Demo: https://codepen.io/anon/pen/RWOPad?editors=101

Replace your rating Div with the below div
<div class="rating">
<ul>
<li ng-click="addRating(1,fruit)"><i class="glyphicon glyphicon-star-empty" ng-class="{active:fruit.rating >= 1}"></i></li>
<li ng-click="addRating(2,fruit)"><i class="glyphicon glyphicon-star-empty" ng-class="{active:fruit.rating >= 2}"></i></li>
<li ng-click="addRating(3,fruit)"><i class="glyphicon glyphicon-star-empty" ng-class="{active:fruit.rating >= 3}"></i></li>
<li ng-click="addRating(4,fruit)"><i class="glyphicon glyphicon-star-empty" ng-class="{active:fruit.rating >= 4}"></i></li>
<li ng-click="addRating(5,fruit)"><i class="glyphicon glyphicon-star-empty" ng-class="{active:fruit.rating >= 5}"></i></li>
</ul>
and add .active class in your css.

Looping through 2 different objects in AngularJS

I have the following controller:
app.controller('MainController', ['$scope', function($scope) {
$scope.taskCategories = {
categories: [
'work',
'chores',
'learning'
]
};
$scope.tasklist = {
tasks: [{
title: 'Email Gregory',
category: 'work'
}, {
title: 'Clean the Kitchen',
category: 'chores'
}, {
title: 'AngularJS',
category: 'learning'
}, {
title: 'Hose Car',
category: 'chores'
}, {
title: 'Email Jethro',
category: 'work'
}
]
};
}]);
And am pulling the information through so far like this:
<div>
<li data-toggle="collapse" data-target="#work" class="nav_head workcat collapsed">
Work <span class="arrow"></span>
</li>
<ul class="sub-menu collapse" id="work">
<li ng-repeat="tasks in tasklist.tasks | orderBy:'title' | filter: {category: 'work'}">
{{ tasks.title }}
</li>
<li class="addwork">
<a href="">
<span class="fa-stack"> <i class="fa fa-2x fa-stack-2x fa-circle"></i><i class="fa fa-2x fa-stack-2x fa-plus-circle"></i>
</a>
</span>
</li>
</ul>
This would work fine doing a few times, one for each category, but I am looking to be able to add categories dynamically, and so I am looking for some way to go through the following steps:
So, I’ll need to loop all in categories.
During that loop, I’ll loop through the tasks and print out any task that matches the string of categories.index(1)
Then add 1 to category index and run again, till category.length runs out
I'm unfamiliar with looping inside a loop, and more unfamiliar again with doing it in angular. Anyone have any suggestions?

You could do an outer loop (ng-repeat) on the categories:
<ul class="sub-menu collapse" id="work" ng-repeat="cat in taskCategories.categories">
<li ng-repeat="tasks in tasklist.tasks | orderBy:'title' | filter: {category: cat}">
{{ tasks.title }}
</li>
<li class="addwork">
<a href="">
<span class="fa-stack"> <i class="fa fa-2x fa-stack-2x fa-circle"></i><i class="fa fa-2x fa-stack-2x fa-plus-circle"></i></span>
</a>
</li>
</ul>
Fiddle

Please refer below code snippet
angular.module('app',[]);
angular.module('app').controller('myController',function($scope){
$scope.taskCategories = {
categories: [
'work',
'chores',
'learning'
]
};
$scope.tasklist = {
tasks: [{
title: 'Email Gregory',
category: 'work'
}, {
title: 'Clean the Kitchen',
category: 'chores'
}, {
title: 'AngularJS',
category: 'learning'
}, {
title: 'Hose Car',
category: 'chores'
}, {
title: 'Email Jethro',
category: 'work'
}
]
};
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<body ng-app="app" ng-controller="myController">
<ul>
<li data-toggle="collapse" data-target=#{{c}} class="nav_head workcat" ng-repeat="c in taskCategories.categories">
<span class="arrow"> {{c}}</span>
<ul class="sub-menu collapse" id={{c}}>
<li ng-repeat="tasks in tasklist.tasks | orderBy:'title' | filter: {category: c}">
{{ tasks.title }}
</li>
</ul>
</li>
</ul>
</body>
Hope this helps!