ReactJS: Group data by months in the same year - reactjs

I have data from api that looks like the following
[{
commission_total: "4740.00"
country: "Kentop"
created_at: "Jun 30, 2020"
deposit: "0.00"
}
{
commission_total: "4760.00"
country: "Kentop2"
created_at: "Jul 1, 2020"
deposit: "0.00"
}]
I am trying to group the data by month of the same year. How do i go about this? I am open to lodash, moment etc. Kindly assist

Try with teh following:-
let data= [{
commission_total: "4740.00"
country: "Kentop"
created_at: "Jun 30, 2020"
deposit: "0.00"
},
{
commission_total: "4760.00"
country: "Kentop2"
created_at: "Jul 1, 2020"
deposit: "0.00"
}]
var grouped = _.mapValues(_.groupBy(data, 'created_at'),
datalist => datalist.map(item => _.omit(item, 'created_at')));
console.log(grouped);

Related

MongoDB - How to retrieve only one specific document from a collection

I have created a database called "Cars" and a collection inside it as, "Cars_info". I have inserted 8 documents inside it as follows.
db.Cars_info.insertMany([
{ car_id: "c1", Company: "Toyota", Model: "Aqua", Year: 2020, Price_in_usd: 25000, Category: "High-end", Country: "Japan" },
{ car_id: "c2", Company: "Toyota", Model: "Premio", Year: 2019, Price_in_usd: 35000, Category: "High-end", Country: "Japan" },
{ car_id: "c3", Company: "Audi", Model: "A6", Year: 2020, Price_in_usd: 55000, Category: "High-end", Country: "Germany" },
{ car_id: "c4", Company: "Tata", Model: "Nano", Year: 2015, Price_in_usd: 10000, Category: "Low-end", Country: "India" },
{ car_id: "c5", Company: "Volkswagen", Model: "Taos", Year: 2022, Price_in_usd: 35000, Category: "High-end", Country: "Germany" },
{ car_id: "c6", Company: "Ford", Model: "Figo", Year: 2019, Price_in_usd: 26000, Category: "High-end", Country: "America" },
{ car_id: "c7", Company: "Mahindra", Model: "Thar", Year: 2018, Price_in_usd: 18000, Category: "Low-end", Country: "India" },
{ car_id: "c8", Company: "Honda", Model: "Vezel", Year: 2015, Price_in_usd: 33000, Category: "High-end", Country: "Japan" }
])
Here I want to retrieve only the third document from the collection. But without matching any field value. like,
db.Cars_info.find({"car_id":"c3"}).pretty()
Is there any way to do this?
You need .skip() and .limit().
Take the document by starting index: 2 and with only 1 document, which is the third document.
Update: Thanks and credit to #Wernfried for pointing out, you need .sort() to guarantee to get the nth of the document. For your scenario, you have to sort by car_id.
Sort Consistency
MongoDB does not store documents in a collection in a particular order. When sorting on a field that contains duplicate values, documents containing those values may be returned in any order.
db.Cars_info.find()
.sort({ "car_id": 1 })
.skip(2)
.limit(1)

React - filter nested array and update the state

I have a state with an array of objects. Objects represent workers. Each worker has a name property and a nested object (projects2021). Inside the nested object there's an array of objects (projectsList):
[{
name: 'John',
projects2021: {
hours: 15,
projectsAll: 10,
projectsNames: ['x', 'y', 'z'],
projectsList: [
{
month: 'january',
projectName: 'germany',
status: 'vodja',
hours: 50,
},
{
month: 'february',
projectName: 'germany',
status: 'vodja',
hours: 50,
},
],
},
},
{
name: 'David',
projects2021: {
hours: 15,
projectsAll: 10,
projectsNames: ['x', 'y', 'z'],
projectsList: [
{
month: 'january',
projectName: 'germany',
status: 'vodja',
hours: 50,
},
{
month: 'february',
projectName: 'germany',
status: 'vodja',
hours: 50,
},
],
},
}
]
const [workers, setWorkers] = useState(users);
I would like to map over the state and render the workers in a way where only the projects with a given month would be shown. For example, if I clicked "january", I would like react to display all the workers (their names), but only the projects with a "month" property of "january". In layman's terms: filtering the table by a given month. This is what I've done so far:
const filterByMonth = (month) => {
let mainArray = [];
workers.map((worker) => {
const result = worker.projects2021.projectsList.filter(
(data) => data.month === month
);
mainArray.push(result)
});
setWorkers(mainArray);
};
With my approach I mutate the state directly (which is not ok) and thus loose certain parts of an object. I want to retain my object and only change the state of a nested array of objects (projectsList).
I was thinking of a way where I would spread the object first and then concat/push the nested array inside of an object.
I do apologize if my question isn't structured the way it should be, but this is my first time posting and I am a self-taught fella :).
Thank you
You can use spread to achieve it. Here's a sample:
const filterByMonth = (month) => {
const result = workers.map((worker) => {
return {...worker , projects2021: worker.projects2021.projectsList.filter(data => data.month === month)}
});
setWorkers(result);
};
One way of accomplishing this is to have workers as constant and filtered workers as state.
const workers= [{
name: 'John',
projects2021: {
hours: 15,
projectsAll: 10,
projectsNames: ['x', 'y', 'z'],
projectsList: [
{
month: 'january',
projectName: 'germany',
status: 'vodja',
hours: 50,
},
],
},
{...}]
const [filteredWorkers, setFilteredWorkers]=useState(workers)
Then apply filtering to the state
const filterByMonth = (month) => {
let newWorkers = workers.filter((worker)=> worker.projects2021.projectsList.month === month);
setFilteredWorkers(newWorkers);
You actually can use this code:
const workers = [{
name: 'John',
projects2021: {
hours: 15,
projectsAll: 10,
projectsNames: ['x', 'y', 'z'],
projectsList: [
{
month: 'january',
projectName: 'germany',
status: 'vodja',
hours: 50,
},
{
month: 'february',
projectName: 'germany',
status: 'vodja',
hours: 50,
},
],
},
},
{
name: 'David',
projects2021: {
hours: 15,
projectsAll: 10,
projectsNames: ['x', 'y', 'z'],
projectsList: [
{
month: 'january',
projectName: 'germany',
status: 'vodja',
hours: 50
},
{
month: 'february',
projectName: 'germany',
status: 'vodja',
hours: 50
},
],
},
}];
const updatedWorkers = workers.map(worker => {
const updatedProjectsList = worker.projects2021.projectsList.filter(item =>
item.month === 'january'
);
return ({...worker, projects2021:{...worker.projects2021, projectsList: updatedProjectsList}});
});
console.log(updatedWorkers)

How do I put an object inside another object based on the same key?

I am working with Reactjs and my data looks like this:
const this.state.singlePost = [{
name: 'Johnny',
age: 20,
birthPlace: 'Germany'
},
{
name: 'Samuel',
age: 22,
birthPlace: 'France'
}
]
let this.state.post = [{
email: 'john#gm.co',
number: 4567887654
},
{
email: 'samuel#gm.co',
number: 0987655881
},
]
I want to make something like this:
let editedPost = [{
name: 'Johnny',
age: 20,
birthPlace: 'Germany',
email: 'john#gm.co',
number: 4567887654
},
{
name: 'Samuel',
age: 22,
birthPlace: 'France',
email: 'samuel#gm.co',
number: 0987655881
}
]
It might be a stupid question, but I got stuck for a few hours on this, Could somebody help me please? I have 5 items in this.state.singlePost and 10 items in this.state.post. How do I put the stuff in this.state.singlePost into this.state.post just like the way I did in editedPost?
In theory, you would have a common key between the two objects that you would be able to merge on as without you will be relying on matching the index of objects.
let post = [
{email: 'john#gm.co',
number: 4567887654},
{email: 'samuel#gm.co',
number: 987655881}
]
let singlePost = [
{name: 'Johnny', age: 20, birthPlace: 'Germany'},
{name: 'Samuel', age: 22, birthPlace: 'France'}
]
let newList = post.map((item, i) => ({...item, ...singlePost[i]}))
console.log(newList)
Output:
[
{
email:"john#gm.co",
number:4567887654,
name:"Johnny",
age:20,
birthPlace:"Germany"
},
{
email:"samuel#gm.co",
number:987655881,
name:"Samuel",
age:22,
birthPlace:"France"
}
]
There is many ways to do this in Javascript. The way I chose prevents mutation of data, which may be something you are concerned with when using React.

how to display anchor in ng-grid column?

Trying to create a ng-grid with a link ie anchor in the first column. It is supposed to redirect to another page ie person passing in the Id for the person:
{{row.getProperty(name)}
My controller looks like this:
$scope.gridOptions = {
data: 'myData',
enablePinning: true,
columnDefs: [
{
field: 'id',
displayName: 'PersonLink',
enableCellEdit: false,
cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()">{{row.getProperty(name)}</div>'
},
{ field: "name", width: 120, pinned: true },
{ field: "age", width: 120 },
{ field: "birthday", width: 120 },
{ field: "salary", width: 120 }
]
};
$scope.myData = [
{ id:1,name: "Moroni", age: 50, birthday: "Oct 28, 1970", salary: "60,000" },
{ id:2,name: "Tiancum", age: 43, birthday: "Feb 12, 1985", salary: "70,000" },
{ id:3,name: "Jacob", age: 27, birthday: "Aug 23, 1983", salary: "50,000" },
{ id:4,name: "Nephi", age: 29, birthday: "May 31, 2010", salary: "40,000" },
{ id:5,name: "Enos", age: 34, birthday: "Aug 3, 2008", salary: "30,000" }
];
});
The link is not even displaying, can someone help out? thanks
Here is the plnkrlink:http://plnkr.co/edit/Yg1fVjVviZPQgwlpVNPb?p=preview
I have tried to fix your fiddle. The updated fiddle is here
http://plnkr.co/edit/hbN32G9KDU0vjR36tKgh?p=preview
The thing that needed fix were you were missing ending }
{{row.getProperty(col.field)}
Also pinned:true is not working maybe because you are doing it on second column. I moved it to first and it works.
Also the expression which refers a string should be fixed here
{{row.getProperty(\'name\')}}

Displaying NULL in ng-grid for angularjs

ngGrid is converting my NULL cells to 0 or an empty string ("") based on the column type.
I need this displayed as 'NULL' instead. What is an efficient way to do this? There could be 10,000+ rows of data displayed in the Grid.
Simple Plunker displaying undesired behaviour:
http://plnkr.co/edit/MwAotQ?p=preview
(notice 0, "", or $0.00 instead of NULL).
Thanks!
->> Josh <<-
Create a custom filter that extends the original filter. Here is how you would do it for your date column:
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.gridOptions = {
data: 'myData',
columnDefs: [{ field: "name", width: 120 },
{ field: "age", width: 120, cellFilter: 'number' },
{ field: "birthday", width: 120, cellFilter: 'nullDateFilter' },
{ field: "salary", width: 120, cellFilter: 'currency' }]
};
$scope.myData = [{ name: "Moroni", age: 50, birthday: "Oct 28, 1970", salary: 60000 },
{ name: "Tiancum", age: 43, birthday: "Feb 12, 1985", salary: 70000 },
{ name: "Jacob", age: 27, birthday: "Aug 23, 1983", salary: 50000 },
{ name: null, age: null, birthday: null, salary: null },
{ name: "Enos", age: 34, birthday: "Aug 3, 2008", salary: 30000 }];
});
app.filter('nullDateFilter', function($filter) {
return function(input) {
var originalFilter = $filter('date');
return input == null ? 'null' : originalFilter(input);
};
});

Resources