COUNT in angularJS - angularjs

So I'm looking to write an AngularJS function that performs a COUNT of how many activities each user has performed.
Ideally: What I'd like to be able to return is (by looking at the data model below):
John Wilson - 2 Deals
Robin Wilson - 3 Deals
Garry Wilson - 3 Deals & 1 Meeting
My question is, how can I conduct a count of each activity using angularJS? What I would like to is create an element that looks like:
<div class="countArea" ng-repeat="activity in selectedUser.activities"
{{activity.count}}
</div>
The code I have so far:
$scope.competitionDetails = {
organisationId: 1,
competitionId: "52eabcf0f3672",
currentUser: 2,
title: "Challenge #1",
description: "Challenge description goes here",
end_date: "2014-03-01",
users: [{
id: 2,
name: "John Wilson",
totalPoints: 40,
activities: [{
id: 6431,
points: 20
}, {
id: 6431,
points: 20
}]
}, {
id: 3,
name: "Robin Wilson",
totalPoints: 60,
activities: [{
id: 6431,
points: 20
}, {
id: 6431,
points: 20
}, {
id: 6431,
points: 20
}]
}, {
id: 1,
name: "Garry Wilson",
totalPoints: 140,
activities: [{
id: 6431,
points: 20
}, {
id: 6431,
points: 20
}, {
id: 6432,
points: 100
}]
}]
};
$scope.activities = [{
id: 6431,
name: "Deal",
points: 20
}, {
id: 6432,
name: "Meeting",
points: 100
}];

Related

React question// how to omit duplicate data in array,

const dayone = [{ name: 1, uid: 1 }, { name: 2, uid: 2 }, { name: 3, uid: 3 },
{ name: "ball", uid: 100 }, { name: "lina", uid: 200 }, { name: "ppp", uid: 700 }]
const daytwo = [{ name: "ball", uid: 100 }, { name: "lina", uid: 200 }, { name: "ppp", uid: 700 }, { name: 7, uid: 7 }]
const total = dayone.concat(daytwo)
i want to omit the duplicate objects..
{ name: "ball", uid: 100 }, { name: "lina", uid: 200 }, { name: "ppp", uid: 700 }
what i really want to get is,
Newtotal = [{ name: 1, uid: 1 }, { name: 2, uid: 2 }, { name: 3, uid: 3 },{ name: 7, uid: 7 }]
how can i solve this problem? help!
i am trying to omit the data which is duplicate in array.
i already used filter, map, reduce.. and other friends told me about omit.
but i couldn't find the way how to resolve problem yet.

I hope this one helps you.
[...new Map(total.map((item) => [item["uid"], item])).values(),];
const dayone = [{ name: 1, uid: 1 }, { name: 2, uid: 2 }, { name: 3, uid: 3 },
{ name: "ball", uid: 100 }, { name: "lina", uid: 200 }, { name: "ppp", uid: 700 }]
const daytwo = [{ name: "ball", uid: 100 }, { name: "lina", uid: 200 }, { name: "ppp", uid: 700 }, { name: 7, uid: 7 }]
const total = dayone.concat(daytwo)
const unique = [
...new Map(total.map((item) => [item["uid"], item])).values(),
];
console.log("original items",total.length,total)
console.log("unique items",unique.length,unique)
Thanks.

TypeError: Cannot destructure property 'title' of 'collections' as it is undefined

I am trying to get collections using selectors. Here is my code:
Selectors
import { createSelector } from "reselect";
export const selectShop = state => state.shop;
export const selectCollections = createSelector(
[selectShop],
shop => shop.collections
)
export const selectCollectionForPreview = createSelector(
[selectCollections],
collections => Object.keys(collections).map(key => collections[key])
)
export const selectCollectionItem = collectionUrl =>
createSelector(
[selectCollections],
collections => collections[collectionUrl]
//It seems that the selector above is returning collections as an array instead of object, so collections[collectionUrl] is returning undefined
)
Component
const CollectionPage = ({collections}) => {
// const {title, items} = Object.keys(collections)
const {title, items} = collections
console.log('collection', collections);
return(
// <></>
<div className="collection-page">
<h2 className='title'>{title}</h2>
<div className='items'>
{items.map( item =>
<CollectionItem key={item.id} item={item}/>
)}
</div>
</div>
)
}
const mapStateToProps = (state,ownProps) => ({
collections: selectCollectionItem(ownProps.match.params.collectionId)(state)
})
export default connect(mapStateToProps)(CollectionPage);
SHOP_DATA
const SHOP_DATA = {
hats:{
id: 1,
title: 'Hats',
routeName: 'hats',
items: [
{
id: 1,
name: 'Brown Brim',
imageUrl: 'https://i.ibb.co/ZYW3VTp/brown-brim.png',
price: 25
},
{
id: 2,
name: 'Blue Beanie',
imageUrl: 'https://i.ibb.co/ypkgK0X/blue-beanie.png',
price: 18
},
{
id: 3,
name: 'Brown Cowboy',
imageUrl: 'https://i.ibb.co/QdJwgmp/brown-cowboy.png',
price: 35
},
{
id: 4,
name: 'Grey Brim',
imageUrl: 'https://i.ibb.co/RjBLWxB/grey-brim.png',
price: 25
},
{
id: 5,
name: 'Green Beanie',
imageUrl: 'https://i.ibb.co/YTjW3vF/green-beanie.png',
price: 18
},
{
id: 6,
name: 'Palm Tree Cap',
imageUrl: 'https://i.ibb.co/rKBDvJX/palm-tree-cap.png',
price: 14
},
{
id: 7,
name: 'Red Beanie',
imageUrl: 'https://i.ibb.co/bLB646Z/red-beanie.png',
price: 18
},
{
id: 8,
name: 'Wolf Cap',
imageUrl: 'https://i.ibb.co/1f2nWMM/wolf-cap.png',
price: 14
},
{
id: 9,
name: 'Blue Snapback',
imageUrl: 'https://i.ibb.co/X2VJP2W/blue-snapback.png',
price: 16
}
]
},
sneakers:{
id: 2,
title: 'Sneakers',
routeName: 'sneakers',
items: [
{
id: 10,
name: 'Adidas NMD',
imageUrl: 'https://i.ibb.co/0s3pdnc/adidas-nmd.png',
price: 220
},
{
id: 11,
name: 'Adidas Yeezy',
imageUrl: 'https://i.ibb.co/dJbG1cT/yeezy.png',
price: 280
},
{
id: 12,
name: 'Black Converse',
imageUrl: 'https://i.ibb.co/bPmVXyP/black-converse.png',
price: 110
},
{
id: 13,
name: 'Nike White AirForce',
imageUrl: 'https://i.ibb.co/1RcFPk0/white-nike-high-tops.png',
price: 160
},
{
id: 14,
name: 'Nike Red High Tops',
imageUrl: 'https://i.ibb.co/QcvzydB/nikes-red.png',
price: 160
},
{
id: 15,
name: 'Nike Brown High Tops',
imageUrl: 'https://i.ibb.co/fMTV342/nike-brown.png',
price: 160
},
{
id: 16,
name: 'Air Jordan Limited',
imageUrl: 'https://i.ibb.co/w4k6Ws9/nike-funky.png',
price: 190
},
{
id: 17,
name: 'Timberlands',
imageUrl: 'https://i.ibb.co/Mhh6wBg/timberlands.png',
price: 200
}
]
},
jackets:{
id: 3,
title: 'Jackets',
routeName: 'jackets',
items: [
{
id: 18,
name: 'Black Jean Shearling',
imageUrl: 'https://i.ibb.co/XzcwL5s/black-shearling.png',
price: 125
},
{
id: 19,
name: 'Blue Jean Jacket',
imageUrl: 'https://i.ibb.co/mJS6vz0/blue-jean-jacket.png',
price: 90
},
{
id: 20,
name: 'Grey Jean Jacket',
imageUrl: 'https://i.ibb.co/N71k1ML/grey-jean-jacket.png',
price: 90
},
{
id: 21,
name: 'Brown Shearling',
imageUrl: 'https://i.ibb.co/s96FpdP/brown-shearling.png',
price: 165
},
{
id: 22,
name: 'Tan Trench',
imageUrl: 'https://i.ibb.co/M6hHc3F/brown-trench.png',
price: 185
}
]
},
womens:{
id: 4,
title: 'Womens',
routeName: 'womens',
items: [
{
id: 23,
name: 'Blue Tanktop',
imageUrl: 'https://i.ibb.co/7CQVJNm/blue-tank.png',
price: 25
},
{
id: 24,
name: 'Floral Blouse',
imageUrl: 'https://i.ibb.co/4W2DGKm/floral-blouse.png',
price: 20
},
{
id: 25,
name: 'Floral Dress',
imageUrl: 'https://i.ibb.co/KV18Ysr/floral-skirt.png',
price: 80
},
{
id: 26,
name: 'Red Dots Dress',
imageUrl: 'https://i.ibb.co/N3BN1bh/red-polka-dot-dress.png',
price: 80
},
{
id: 27,
name: 'Striped Sweater',
imageUrl: 'https://i.ibb.co/KmSkMbH/striped-sweater.png',
price: 45
},
{
id: 28,
name: 'Yellow Track Suit',
imageUrl: 'https://i.ibb.co/v1cvwNf/yellow-track-suit.png',
price: 135
},
{
id: 29,
name: 'White Blouse',
imageUrl: 'https://i.ibb.co/qBcrsJg/white-vest.png',
price: 20
}
]
},
mens:{
id: 5,
title: 'Mens',
routeName: 'mens',
items: [
{
id: 30,
name: 'Camo Down Vest',
imageUrl: 'https://i.ibb.co/xJS0T3Y/camo-vest.png',
price: 325
},
{
id: 31,
name: 'Floral T-shirt',
imageUrl: 'https://i.ibb.co/qMQ75QZ/floral-shirt.png',
price: 20
},
{
id: 32,
name: 'Black & White Longsleeve',
imageUrl: 'https://i.ibb.co/55z32tw/long-sleeve.png',
price: 25
},
{
id: 33,
name: 'Pink T-shirt',
imageUrl: 'https://i.ibb.co/RvwnBL8/pink-shirt.png',
price: 25
},
{
id: 34,
name: 'Jean Long Sleeve',
imageUrl: 'https://i.ibb.co/VpW4x5t/roll-up-jean-shirt.png',
price: 40
},
{
id: 35,
name: 'Burgundy T-shirt',
imageUrl: 'https://i.ibb.co/mh3VM1f/polka-dot-shirt.png',
price: 25
}
]
}
};
export default SHOP_DATA;
Please provide any pointers or advice on what am I doing wrong? I keep getting the error. It seems that the collection is undefined. I don't understand why. Ideally it should return an object.

You are exporting the component like this
const mapStateToProps = (state,ownProps) => ({
collections: selectCollectionItem(ownProps.match.params.collectionId)(state)
})
export default connect(mapStateToProps)(CollectionPage);
The ownProps.match.params.collectionId might be undefined.
Add this at the top of your file
import { withRouter} from 'react-router-dom'
and export your component like
export default connect(mapStateToProps)(withRouter(CollectionPage));

Find and Replace Value with id from one Array with another nested Array Object in TypeScript

I have an first array like this
[
["Maths", "Chemistry", "Physics"],
["CS", "EC"],
["High", "Medium", "Low", "Average", "Excellent"]
]
And I have an another array of object in the below format
[
[{
id: 1,
name: "Maths",
is_active: 1
},
{
id: 2,
name: "Chemistry",
is_active: 1
},
{
id: 3,
name: "Physics",
is_active: 1
},
{
id: 4,
name: "Social Science",
is_active: 1
}
],
[{
id: 10,
name: "CS",
is_active: 1
},
{
id: 11,
name: "EC",
is_active: 1
},
{
id: 12,
name: "PHY",
is_active: 1
},
],
[{
id: 101,
name: "High",
is_active: 1
},
{
id: 102,
name: "Low",
is_active: 1
},
{
id: 103,
name: "Medium",
is_active: 1
},
{
id: 104,
name: "Excellent",
is_active: 1
},
{
id: 105,
name: "Average",
is_active: 1
},
{
id: 106,
name: "Below Average",
is_active: 1
},
]
]
I need to replace the first array values with id by matching the names present in first array with name present in the nested array of objects in second array.
My Final Output need to be in this format
[
[1,2,3],
[10,11],
[101,103,102,105,104]
]
Can Anyone help me how to do this in TypeScript.

I can suggest using map() and find() this :
simpleData is your table containing only the names
fullData is your table containing your objects
let fullData = [
[{
id: 1,
name: "Maths",
is_active: 1
},
{
id: 2,
name: "Chemistry",
is_active: 1
},
{
id: 3,
name: "Physics",
is_active: 1
},
{
id: 4,
name: "Social Science",
is_active: 1
}
],
[{
id: 10,
name: "CS",
is_active: 1
},
{
id: 11,
name: "EC",
is_active: 1
},
{
id: 12,
name: "PHY",
is_active: 1
},
],
[{
id: 101,
name: "High",
is_active: 1
},
{
id: 102,
name: "Low",
is_active: 1
},
{
id: 103,
name: "Medium",
is_active: 1
},
{
id: 104,
name: "Excellent",
is_active: 1
},
{
id: 105,
name: "Average",
is_active: 1
},
{
id: 106,
name: "Below Average",
is_active: 1
},
]
]
let simpleData = [
["Maths", "Chemistry", "Physics"],
["CS", "EC"],
["High", "Medium", "Low", "Average", "Excellent"]
]
let newIdTable = [];
for ( let i = 0; i < fullData.length; i++ ) {
let table = simpleData[i].map( ( name ) => {
return fullData[i].find( item => item.name === name ).id
} );
newIdTable.push( table );
}
console.log(newIdTable)
Using find(), if the corresponding object doesn't exist it will return undefined. I didn't test the case here, because I supposed that your object already exist in the fullData table. So you have to modify the code with a condition to handle that case if you need :)

How to set foucs on a particular node when using getorgchart

I'm using this getorgchart library to generate organization chart in my application. I just want to highlight a particular node, i.e. the user who has logged in the application his node should be highlighted.

// Code goes here
var orgChart = new getOrgChart(document.getElementById("people"), {
theme: "monica",
primaryFields: ["name", "title"],
photoFields: ["image"],
gridView: true,
linkType: "B",
dataSource: [
{ id: 1, parentId: null, name: "Amber McKenzie", title: "CEO", phone: "678-772-470", mail: "lemmons#jourrapide.com", adress: "Atlanta, GA 30303", image: "images/f-11.jpg" },
{ id: 2, parentId: 1, name: "Ava Field", title: "Paper goods machine setter", phone: "937-912-4971", mail: "anderson#jourrapide.com", image: "images/f-22.jpg" },
{ id: 3, parentId: 1, name: "Evie Johnson", title: "Employer relations representative", phone: "314-722-6164", mail: "thornton#armyspy.com", image: "images/f-24.jpg" },
{ id: 6, parentId: 2, name: "Rebecca Randall", title: "Optometrist", phone: "801-920-9842", mail: "JasonWGoodman#armyspy.com", image: "images/f-8.jpg" },
{ id: 7, parentId: 2, name: "Spencer May", title: "System operator", phone: "Conservation scientist", mail: "hodges#teleworm.us", image: "images/f-7.jpg" },
{ id: 8, parentId: 3, name: "Max Ford", title: "Budget manager", phone: "989-474-8325", mail: "hunter#teleworm.us", image: "images/f-6.jpg" },
{ id: 9, parentId: 3, name: "Riley Bray", title: "Structural metal fabricator", phone: "479-359-2159", image: "images/f-3.jpg" }
],
customize: {
"1": { color: "green" },
"2": { theme: "deborah" },
"3": { theme: "deborah", color: "darkred" }
}
});
Here
customize: {
"1": { color: "green" },
"2": { theme: "deborah" },
"3": { theme: "deborah", color: "darkred" }
}
u can customize for particular Id based on your login data id you can customize and make it highlight

calculating a count (number of distinct key's in an object) in angular

I have the following Angular code, see below.
What I'd like to achieve is - for each user - find out the "count" for each activity type.
What I'd like to achieve is:
John Thompson = 2 Deal
Bill Gates = 3 Deal
Billy Wellington = 2 Deal, 1 Meeting
The activity id's are the same in the activities object, and the $scope.activities.
Bit stuck here, any idea on how to either a) Write a function to get the COUNT or b) Do something clever in the HTML element with a ng-repeat and group or something.
$scope.competitionDetails = {
end_date: "2014-03-01",
users: [{
id: 2,
name: "John Thompson",
activities: [{ //This is all their activities
id: 6431,
time: (57).minutes().ago(),
points: 20
}, {
id: 6431,
time: new Date(),
points: 20
}]
}, {
id: 3,
name: "Bill Gates",
activities: [{ //This is all their activities
id: 6431,
time: new Date(),
points: 20
}, {
id: 6431,
time: new Date(),
points: 20
}, {
id: 6431,
time: new Date(),
points: 20
}]
}, {
id: 1,
name: "Billy Wellington",
activities: [{ //This is all their activities
id: 6431,
time: new Date(),
points: 20
}, {
id: 6431,
time: new Date(),
points: 20
}, {
id: 6432,
time: new Date(),
points: 100
}]
}]
};
$scope.activities = [{
id: 6431,
name: "Deal",
points: 20
}, {
id: 6432,
name: "Meeting",
points: 100
}];

I have created a fiddle for you with a working example: http://jsfiddle.net/ADukg/4757/
Just using some regular js, with a tiny bit of angular:
// create a lookup
var lookup = {};
angular.forEach($scope.activities, function(activity){
lookup[activity.id] = activity;
});
// calculate the results
angular.forEach($scope.competitionDetails.users, function(user){
user.results = {};
angular.forEach(user.activities, function(activity){
var name = lookup[activity.id].name;
if(!user.results[name]){
user.results[name] = 1;
}else{
user.results[name] += 1;
}
});
});

Resources