Related
I'll freely admit that Javascript is not my strongest language, and React Native is very new, so, there may be an obviously easy way to do this that I'm not seeing.
I've got an API that presents some transaction data in a simple structure:
[
{
"id": 1,
"title": "Apple Store",
"date": "2021-09-10",
"amount": "$100.00",
},
{
"id": 41,
"title": "Zulauf, Walter and Metz",
"date": "2021-09-10",
"amount": "$14.00",
},
{
"id": 9,
"title": "Aufderhar PLC",
"date": "2021-09-09",
"amount": "$78.00",
},
{
"id": 10,
"title": "Bayer and Sons",
"date": "2021-09-07",
"amount": "$67.00",
}
]
I want to present this data using a SectionList component, with the transactions in sections by date. My (likely crude) attempt to solve this was going to be to transform this data into the following structure:
[
{
"date": "2021-09-10",
"transactions": [
{
"id": 1,
"title": "Apple Store",
"date": "2021-09-10",
"amount": "$100.00",
},
{
"id": 41,
"title": "Zulauf, Walter and Metz",
"date": "2021-09-10",
"amount": "$14.00",
}
]
},
{
"date": "2021-09-09",
"transactions": [
{
"id": 9,
"title": "Aufderhar PLC",
"date": "2021-09-09",
"amount": "$78.00",
}
]
},
{
"date": "2021-09-07",
"transactions": [
{
"id": 10,
"title": "Bayer and Sons",
"date": "2021-09-07",
"amount": "$67.00",
}
]
}
]
But I'm honestly lost as to how to transform this data (or if there's a better way to solve this problem). I started by using Lodash's groupBy function, which seemed promising, but it looks like SectionList doesn't want an object, it wants an array.
Transforming the output of groupBy into an array straight off drops the keys and I've got grouped data but no clear value for the section header.
Again, there's probably some deviously simple way to address this, data comes in as a flat array all the time. I appreciate any guidance, assistance, or examples anybody can point me to.
const input = [
{
"id": 1,
"title": "Apple Store",
"date": "2021-09-10",
"amount": "$100.00",
},
{
"id": 41,
"title": "Zulauf, Walter and Metz",
"date": "2021-09-10",
"amount": "$14.00",
},
{
"id": 9,
"title": "Aufderhar PLC",
"date": "2021-09-09",
"amount": "$78.00",
},
{
"id": 10,
"title": "Bayer and Sons",
"date": "2021-09-07",
"amount": "$67.00",
}
]
const result = input.reduce((accum, current)=> {
let dateGroup = accum.find(x => x.date === current.date);
if(!dateGroup) {
dateGroup = { date: current.date, transactions: [] }
accum.push(dateGroup);
}
dateGroup.transactions.push(current);
return accum;
}, []);
console.log(result)
Given an array, whenever your result is expecting to have same number of elements, use map, but since your result has different number of elements, use reduce as shown above. The idea is by having reduce, loop over each element, see if you can find the element, and push the current element into the list
The lodash groupBy just helps you with group data, you should process grouped data by converting it into your format.
const input = [
{
"id": 1,
"title": "Apple Store",
"date": "2021-09-10",
"amount": "$100.00",
},
{
"id": 41,
"title": "Zulauf, Walter and Metz",
"date": "2021-09-10",
"amount": "$14.00",
},
{
"id": 9,
"title": "Aufderhar PLC",
"date": "2021-09-09",
"amount": "$78.00",
},
{
"id": 10,
"title": "Bayer and Sons",
"date": "2021-09-07",
"amount": "$67.00",
}
];
const groupedArray = _.groupBy(input, "date");
let result = [];
for (const [key, value] of Object.entries(groupedArray)) {
result.push({
'date': key,
'transactions': value
})
}
console.log(result);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>
simply
const data =
[ { id: 1, title: 'Apple Store', date: '2021-09-10', amount: '$100.00' }
, { id: 41, title: 'Zulauf, Walter and Metz', date: '2021-09-10', amount: '$14.00' }
, { id: 9, title: 'Aufderhar PLC', date: '2021-09-09', amount: '$78.00' }
, { id: 10, title: 'Bayer and Sons', date: '2021-09-07', amount: '$67.00' }
]
const res = Object.entries(data.reduce((r,{id,title,date,amount})=>
{
r[date] = r[date] ?? []
r[date].push({id,title,date,amount})
return r
},{})).map(([k,v])=>({date:k,transactions:v}))
console.log( res )
.as-console-wrapper { max-height: 100% !important; top: 0 }
With lodash you can group by the date then map to the required form:
const input = [{"id":1,"title":"Apple Store","date":"2021-09-10","amount":"$100.00"},{"id":41,"title":"Zulauf, Walter and Metz","date":"2021-09-10","amount":"$14.00"},{"id":9,"title":"Aufderhar PLC","date":"2021-09-09","amount":"$78.00"},{"id":10,"title":"Bayer and Sons","date":"2021-09-07","amount":"$67.00"}];
const result = _.map(
_.groupBy(input, 'date'),
(transactions, date) => ({ date, transactions })
)
console.log(result);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>
you could use loadash
var result = _(data)
.groupBy(item => item.date)
.map((value, key) => ({date: key, transactions: value}))
.value();
This question already has answers here:
Group array items using object
(19 answers)
Closed 3 years ago.
I have an objects with similar ids
[{
"_id": "603",
"name": 'innova',
"type": 'suv',
"brand": 'toyota'
},
{
"_id": "902",
"name": 'i20',
"type": 'hashback',
"brand": 'hyundai'
},
{
"_id": "603",
"name": 'indigo',
"type": 'haskback',
"brand": 'toyota'
}]
should be converted to
[{
"_id": "603",
"name": ['innova', 'indigo'],
"type": ['suv', 'haskback'],
"brand": ['toyota', 'toyota']
}, {
"_id": "902",
"name": ['i20'],
"type": ['hashback'],
"brand": ['hyundai']
}]
i have tried using Object.keys and Object.Values by pushing them if id already exits but failed.
Use the reduce function to build an object _id based.
Then after use Object.values() to retrieve an object as you want
const data = [{
"_id": "603",
"name": 'innova',
"type": 'suv',
"brand": 'toyota'
},
{
"_id": "902",
"name": 'i20',
"type": 'hashback',
"brand": 'hyundai'
},
{
"_id": "603",
"name": 'indigo',
"type": 'haskback',
"brand": 'toyota'
}
]
const newData = data.reduce((acc, row) => {
if (!acc.hasOwnProperty(row._id)) {
// there is no rows with the _id, we push a row into our accumulator
acc[row._id] = {
"_id": row._id,
name: [row.name],
type: [row.type],
brand: [row.brand]
};
} else {
// as the row with the _id exists, we just push values in the arrays
acc[row._id].name.push(row.name);
acc[row._id].type.push(row.type);
acc[row._id].brand.push(row.brand);
}
return acc;
}, {});
console.log(Object.values(newData));
This question already has answers here:
How to filter object array based on attributes?
(21 answers)
Closed 3 years ago.
Say I have an array of music
The code below returns all the titles for all genres. However, I only want the title names for songs in the Country genre.
const music= [{
"title": "Cheats",
"year": 2018,
"cast": ["Jane Rhee", "Kacey Brown"],
"genres": ["Country"]
}, {
"title": "Road",
"year": 2018,
"cast": ["Jeff Bates", "Alan Walker", "Cindy Bates"],
"genres": ["Country"]
}, {
"title": "Trail Down",
"year": 2018,
"cast": ["Ken Clemont"],
"genres": ["Jazz"]
}, {
"title": "Way Down",
"year": 2018,
"cast": ["Denzel Harr", "Dan Smith", "Lee Kyle", "Nate Hill"],
"genres": ["Pop"]
}, {
"title": "Fountain",
"year": 2018,
"cast": ["Brad Smith", "Rosa King"],
"genres": ["Rock"]
}, {
"title": "Gold Bells",
"year": 2018,
"cast": ["Paisley John"],
"genres": ["Blues"]
}, {
"title": "Mountain Curve",
"year": 2018,
"cast": ["Michael Johnson"],
"genres": ["Country"]
}, {
"title": "Arabella",
"year": 2018,
"cast": [],
"genres": ["Jazz"]
}, {
"title": "Curved",
"year": 2018,
"cast": ["Brett Shay"],
"genres": ["Country"]
}];
let songs = [];
for (var i = 0; i < music.length; i++) {
songs.push(music[i].title);
}
console.log(songs);
.filter the array by whether Country is included in the genres, then .map to the titles:
const music=[{title:"Cheats",year:2018,cast:["Jane Rhee","Kacey Brown"],genres:["Country"]},{title:"Road",year:2018,cast:["Jeff Bates","Alan Walker","Cindy Bates"],genres:["Country"]},{title:"Trail Down",year:2018,cast:["Ken Clemont"],genres:["Jazz"]},{title:"Way Down",year:2018,cast:["Denzel Harr","Dan Smith","Lee Kyle","Nate Hill"],genres:["Pop"]},{title:"Fountain",year:2018,cast:["Brad Smith","Rosa King"],genres:["Rock"]},{title:"Gold Bells",year:2018,cast:["Paisley John"],genres:["Blues"]},{title:"Mountain Curve",year:2018,cast:["Michael Johnson"],genres:["Country"]},{title:"Arabella",year:2018,cast:[],genres:["Jazz"]},{title:"Curved",year:2018,cast:["Brett Shay"],genres:["Country"]}];
const countryTitles = music
.filter(({ genres }) => genres.includes('Country'))
.map(({ title }) => title);
console.log(countryTitles)
If you want to do it while only iterating over the dataset once, use reduce instead:
const music=[{title:"Cheats",year:2018,cast:["Jane Rhee","Kacey Brown"],genres:["Country"]},{title:"Road",year:2018,cast:["Jeff Bates","Alan Walker","Cindy Bates"],genres:["Country"]},{title:"Trail Down",year:2018,cast:["Ken Clemont"],genres:["Jazz"]},{title:"Way Down",year:2018,cast:["Denzel Harr","Dan Smith","Lee Kyle","Nate Hill"],genres:["Pop"]},{title:"Fountain",year:2018,cast:["Brad Smith","Rosa King"],genres:["Rock"]},{title:"Gold Bells",year:2018,cast:["Paisley John"],genres:["Blues"]},{title:"Mountain Curve",year:2018,cast:["Michael Johnson"],genres:["Country"]},{title:"Arabella",year:2018,cast:[],genres:["Jazz"]},{title:"Curved",year:2018,cast:["Brett Shay"],genres:["Country"]}];
const countryTitles = music
.reduce((a, { genres, title }) => {
if (genres.includes('Country')) {
a.push(title)
}
return a;
}, []);
console.log(countryTitles)
Try this:
let songs = [];
for (var i = 0; i < music.length; i++) {
if(music[i].genres == "Country"){ // if music genres equal to "country"
songs.push(music[i].title);
}
}
// output : Cheats,Road,Mountain Curve,Curved
This question already has answers here:
group object as 2d array by key
(3 answers)
Closed 3 years ago.
I have a list of objects
storage = [{
"name": "PAYR AS",
"year": "2016",
"importance": 0.015
}, {
"name": "ENTRILLO AS",
"year": "2017",
"importance": 0.43200000000000005
}, {
"name": "ENTRILLO AS",
"year": "2017",
"importance": 0.43200000000000005
}]
and by this array I wish to create a new array with two lists inside a list, where we have sorted by the name key, as such
list = [
[{
"name": "PAYR AS",
"year": "2016",
"importance": 0.015
}],
[{
"name": "ENTRILLO AS",
"year": "2017",
"importance": 0.43200000000000005
}, {
"name": "ENTRILLO AS",
"year": "2017",
"importance": 0.43200000000000005
}]
]
Is there any easy way to do this in javascript?
I've tried creating a set amount of new arrays and appending into them, however, then I've run into the problem that I need to know how many name-elements I have beforehand, which I do not necessarily know.
Thanks, and sorry if this is a stupid question!
Start by making a map that maps the grouping key to the items (this would in my opinion also be easier working with). In your example it's name. You can use thise map to created a nested array:
const rawData = [
{
"name":"PAYR AS",
"year":"2016",
"importance":0.015,
},
{
"name":"ENTRILLO AS",
"year":"2017",
"importance":0.43200000000000005,
},
{
"name":"ENTRILLO AS",
"year":"2017",
"importance":0.43200000000000005,
},
];
const companyToData = rawData.reduce((acc, item) => {
const foo = acc[item.name] ? acc[item.name] : [];
return {
...acc,
[item.name]: [
...foo,
item,
],
};
}, {});
const data = Object.values(companyToData);
console.log(data);
From the following array:
var arr = [{ "Year": 2019, "Title": "Sample1", "Sum": 1020000.0, "Budget":0},
{ "Year": 2019, "Title": "Sample2", "Sum": 2546658.0, "Budget":100},
{ "Year": 2019, "Title": "Sample3", "Sum": 1020000.0, "Budget":1000},
{ "Year": 2020, "Title": "Sample1", "Sum": 3472000.0, "Budget":100},
{ "Year": 2020, "Title": "Sample2", "Sum": 1020000.0, "Budget":10},
{ "Year": 2020, "Title": "Sample3", "Sum": 2452000.0, "Budget":50},
{ "Year": 2021, "Title": "Sample1", "Sum": 1000.0, "Budget":100},
{ "Year": 2021, "Title": "Sample2", "Sum": 119000.0, "Budget":10},
{ "Year": 2021, "Title": "Sample3", "Sum": 234000.0, "Budget":50}]
]
I need to change this into a single year per row, were the value of each "Title" has an entry with its "Sum" value and the Budget values should be aggregated together ie.
[{ "Year": 2019, "Sample1": 1020000.0, "Sample2":2546658.0, "Sample3":1020000.0 , "Budget":1100},{ etc]
My platform does not support ES6, through answers from an earlier post I have used .reduce as follows to get most of the way:
var res = arr.reduce(function(acc, curr) {
acc[curr.Year] = acc[curr.Year];
acc[curr.Year] = acc[curr.Year] || { Year: curr.Year } ;
acc[curr.Year][curr.Title] = curr.Sum;
return acc;
res = Object.keys(res).map(function(key) {
return res[key];
});
This produces:
[{ "Year": 2019, "Sample1": 1020000.0, "Sample2":2546658.0, "Sample3":1020000.0 },
{ "Year": 2020, "Sample2": 3472000.0, "Sample2":1020000.0, "Sample3":2452000.0},
{ "Year": 2021, "Sample3": 1000.0, "Sample2":119000.0, "Sample3":234000.0}]
But I cannot find a way to also sum the Budget figures together and add it to the same entry. I suspect I need to perform a separate reduce function on a duplicate array and push the result into the res array using the forEach loop with Year as the key. Can anyone see a way of doing this in the same reduce function?
When initializing a Year object in the reduce callback, also initialize a Budget property to 0. Then, on each iteration for that year, add to the budget property in addition to setting the Sample property:
var arr = [{ "Year": 2019, "Title": "Sample1", "Sum": 1020000.0, "Budget":0},
{ "Year": 2019, "Title": "Sample2", "Sum": 2546658.0, "Budget":100},
{ "Year": 2019, "Title": "Sample3", "Sum": 1020000.0, "Budget":1000},
{ "Year": 2020, "Title": "Sample1", "Sum": 3472000.0, "Budget":100},
{ "Year": 2020, "Title": "Sample2", "Sum": 1020000.0, "Budget":10},
{ "Year": 2020, "Title": "Sample3", "Sum": 2452000.0, "Budget":50},
{ "Year": 2021, "Title": "Sample1", "Sum": 1000.0, "Budget":100},
{ "Year": 2021, "Title": "Sample2", "Sum": 119000.0, "Budget":10},
{ "Year": 2021, "Title": "Sample3", "Sum": 234000.0, "Budget":50}
]
var res = arr.reduce(function(acc, curr) {
acc[curr.Year] = acc[curr.Year] || { Year: curr.Year, Budget: 0 } ;
// ^^^^^^^^^
acc[curr.Year][curr.Title] = curr.Sum;
acc[curr.Year].Budget += curr.Budget;
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
return acc;
}, {});
var output = Object.keys(res).map(function(key) {
return res[key];
});
console.log(output);
Note that the line in your original code
acc[curr.Year] = acc[curr.Year];
doesn't accomplish anything at all - you may omit it entirely.
You could consider using Babel and polyfills, allowing you to write code in the latest and greatest version of the language, while preserving compatibility for obsolete browsers, in which case, the code could be prettified to:
var arr=[{"Year":2019,"Title":"Sample1","Sum":1020000.0,"Budget":0},{"Year":2019,"Title":"Sample2","Sum":2546658.0,"Budget":100},{"Year":2019,"Title":"Sample3","Sum":1020000.0,"Budget":1000},{"Year":2020,"Title":"Sample1","Sum":3472000.0,"Budget":100},{"Year":2020,"Title":"Sample2","Sum":1020000.0,"Budget":10},{"Year":2020,"Title":"Sample3","Sum":2452000.0,"Budget":50},{"Year":2021,"Title":"Sample1","Sum":1000.0,"Budget":100},{"Year":2021,"Title":"Sample2","Sum":119000.0,"Budget":10},{"Year":2021,"Title":"Sample3","Sum":234000.0,"Budget":50}]
const output = Object.values(arr.reduce((a, { Year, Title, Sum, Budget }) => {
a[Year] = a[Year] || { Year, Budget: 0 };
a[Year][Title] = Sum;
a[Year].Budget += Budget;
return a;
}, {}));
console.log(output);