Array transformation in D3 - javascript

What is best way to transform array from this
[{
"state": "vic",
"age_group_1": 10,
"age_group_2": 20,
"age_group_3": 30,
"age_group_4": 40,
"age_group_5": 50,
}, {
"state": "nsw",
"age_group_1": 60,
"age_group_2": 70,
"age_group_3": 80,
"age_group_4": 90,
"age_group_5": 100,
}, {
"state": "tas",
"age_group_1": 11,
"age_group_2": 21,
"age_group_3": 31,
"age_group_4": 41,
"age_group_5": 51,
}, {
"state": "qld",
"age_group_1": 61,
"age_group_2": 71,
"age_group_3": 81,
"age_group_4": 91,
"age_group_5": 101,
}]
to this
[{
"age_group": "age_group_1",
"states": [{
"name": "vic",
"value": 10
}, {
"name": "nsw",
"value": 60
}, {
"name": "tas",
"value": 11
}, {
"name": "qld",
"value": 61
}]
}, {
"age_group": "age_group_2",
"states": [{
"name": "vic",
"value": 20
}, {
"name": "nsw",
"value": 70
}, {
"name": "tas",
"value": 21
}, {
"name": "qld",
"value": 71
}]
}, {
"age_group": "age_group_3",
"states": [{
"name": "vic",
"value": 30
}, {
"name": "nsw",
"value": 80
}, {
"name": "tas",
"value": 31
}, {
"name": "qld",
"value": 81
}]
}, {
"age_group": "age_group_5",
"states": [{
"name": "vic",
"value": 40
}, {
"name": "nsw",
"value": 90
}, {
"name": "tas",
"value": 41
}, {
"name": "qld",
"value": 91
}]
}, {
"age_group": "age_group_5",
"states": [{
"name": "vic",
"value": 50
}, {
"name": "nsw",
"value": 100
}, {
"name": "tas",
"value": 51
}, {
"name": "qld",
"value": 101
}]
}]
using simple javascript and looping I can do but I want to use either d3 functions or may be any other library that deal with data transformation.
Which is best library for data transformation.

You could use a temporary object for the reference to the result array.
var data = [{ "state": "vic", "age_group_1": 10, "age_group_2": 20, "age_group_3": 30, "age_group_4": 40, "age_group_5": 50, }, { "state": "nsw", "age_group_1": 60, "age_group_2": 70, "age_group_3": 80, "age_group_4": 90, "age_group_5": 100, }, { "state": "tas", "age_group_1": 11, "age_group_2": 21, "age_group_3": 31, "age_group_4": 41, "age_group_5": 51, }, { "state": "qld", "age_group_1": 61, "age_group_2": 71, "age_group_3": 81, "age_group_4": 91, "age_group_5": 101, }],
result = [];
data.forEach(function (a) {
Object.keys(a).forEach(function (k) {
if (k !== 'state') {
if (!this[k]) {
this[k] = { age_group: k, states: [] };
result.push(this[k]);
}
this[k].states.push({ name: a.state, value: a[k] });
}
}, this);
}, {});
document.write('<pre>' + JSON.stringify(result, 0, 4) + '</pre>');

Take advantage of modern JS instead of trying to make D3 do it - it's pretty simple code:
var basedata = the original array from your question;
// I assume your data already has this array of categories somewhere,
// but if it doesn't, let's just declare it here:
var age_groups = [
"age_group_1",
"age_group_2",
"age_group_3",
"age_group_4",
"age_group_5"
];
var transformed = age_groups.map(group => {
return {
age_group: group,
states: basedata.map(set => {
return { state: set.state, value: set[group] }
})
};
});
And done.
The reason this works is because you want objects keyed on your age groups, so we start by making sure we create a mapping based on those. Then, for each age group, we simply run through the base data and return the state/value pair. Nothing really complex, and ES6/ES2015 does the job for us.
Don't like ES6/ES2015? Good opportunity to get with the times, but also really easily rewritten to older ES5 format: replace each (...) => { ... } with function(...) { return ... } and done.

You can try something like this:
var data=[{state:"vic",age_group_1:10,age_group_2:20,age_group_3:30,age_group_4:40,age_group_5:50},{state:"nsw",age_group_1:60,age_group_2:70,age_group_3:80,age_group_4:90,age_group_5:100},{state:"tas",age_group_1:11,age_group_2:21,age_group_3:31,age_group_4:41,age_group_5:51},{state:"qld",age_group_1:61,age_group_2:71,age_group_3:81,age_group_4:91,age_group_5:101}];
var _tmp = {}
var kepReg = /^age_group/;
data.forEach(function(item) {
for (var k in item) {
if (kepReg.test(k)) {
if (!_tmp[k])
_tmp[k] = {
state: []
};
_tmp[k].state.push({
name: item["state"],
value: item[k]
})
}
}
});
var result = Object.keys(_tmp).map(function(k) {
return {
age_group: k,
states: _tmp[k].state
}
});
document.write("<pre>" + JSON.stringify(result, 0, 4) + "</pre>")

Related

Can't loop array after grouping with .reduce

I've got the following meetings object :
[
{
"id": 19,
"duration": 1.75,
"Employee": {
"name": "Jeanne",
}
},
{
"id": 20,
"duration": 1.00,
"Employee": {
"name": "Louis",
}
},
{
"id": 21,
"duration": 1.00,
"Employee": {
"name": "Jeanne",
}
}
]
I want to group it by Employee.name. Using reduce() here is what I come up with :
meetings.reduce(function (r, a) {
r[a.Employee.name] = r[a.Employee.name] || [];
r[a.Employee.name].push(a);
return r;
}
The resulting object is the following :
{
"Jeanne": [
{
"id": 19,
"duration": 1.75,
"Employee": {
"name": "Jeanne"
}
},
{
"id": 21,
"duration": 1.00,
"Employee": {
"name": "Jeanne"
}
}
],
"Louis": [
{
"id": 20,
"duration": 1.00,
"Employee": {
"name": "Louis"
}
}
]
}
If I try to map() or forEach() i cannot get the value of the element :
Array.from(thisMeeting).forEach(element => console.log(element));
return `undefined`;
Array.from-ming an Object will result in an empty array.
You'll have to iterate over the objects keys with Object.entries(thisMeeting).forEach… and grab the values inside that.

Create dynamic object with dynamic keys and non dynamic

I am trying to create nested objects with some dynamic and not dynamic fields
this is my dataset let method = {
"97": {
"mini_id": 75,
"score": "2",
"fe_id": 97
},
"98": {
"mini_id": 75,
"score": "2",
"fe_id": 98
},
"169": {
"mini_id": 76,
"score": "1",
"fe_id": 169
},
"170": {
"mini_id": 76,
"score": "1",
"fe_id": 170
},
"171": {
"mini_id": 76,
"score": "1",
"fe_id": 171
},
"172": {
"mini_id": 76,
"score": "3",
"fe_id": 172
}
}
And I am trying to have the data in the format of
var reduced = Object.values(arr).reduce((c,v) => {
c[v.mini_id] = c[v.mini_id] || {};
c[v.mini_id]["fees"][v.fe_id] = c[v.mini_id]["fees"][v.fe_id] || {};
return c;
}, {})
I want my dictionary to look like :
{75: {fees: {97: {....}}}}
Looks like it doesn't like dynamic keys to be mixed with non dynamic. Any suggestions?
The following code snippet might help you,
const arr = {
97: {
mini_id: 75,
score: "2",
fe_id: 97,
},
98: {
mini_id: 75,
score: "2",
fe_id: 98,
},
169: {
mini_id: 76,
score: "1",
fe_id: 169,
},
170: {
mini_id: 76,
score: "1",
fe_id: 170,
},
171: {
mini_id: 76,
score: "1",
fe_id: 171,
},
172: {
mini_id: 76,
score: "3",
fe_id: 172,
},
};
const reduced = Object.values(arr).reduce((c, v) => {
c[v.mini_id] = c[v.mini_id] ?? { fees: {} };
c[v.mini_id].fees[v.fe_id] = c[v.mini_id].fees[v.fe_id] ?? {};
return c;
}, {})
console.log(reduced);

Retrive Value from nested object using recursion

I have an JS object data, from this array of object, I need to take "amount" value which is inside of "limitBreakup" Array. I have done using .map(), But I am intersted to know the implementation of the same using Recursion.
var data = [
{
"limitRequirementId":"123",
"facilityType":"cc",
"amount":800000,
"existingRoi":12,
"existingPf":12100,
"repoRate":5,
"spread":10,
"tenure":24,
"margin":10000,
"loanVariable":{
"type":"roi/commission",
"value":15
},
"limitBreakup":[
{
"limitRequirementId":"13",
"facilityType":"cc",
"repoRate":5,
"amount":8000,
"spread":10,
"tenure":24,
"margin":100,
"loanVariable":{
"type":"roi/commission",
"value":15
}
},
{
"limitRequirementId":"22",
"facilityType":"LC",
"repoRate":4,
"amount":900,
"spread":6,
"tenure":21,
"margin":15,
"loanVariable":{
"type":"roi/commission",
"value":10
}
}
]
},
{
"limitRequirementUniqueId":"13",
"limitRequirementId":"13",
"facilityType":"lc",
"amount":900000,
"existingRoi":10,
"existingPf":1000,
"repoRate":3,
"spread":1,
"tenure":21,
"margin":1000,
"loanVariable":{
"type":"roi/commission",
"value":15
},
"limitBreakup":[
{
"limitRequirementId":"35",
"facilityType":"CC",
"repoRate":6,
"amount":600,
"spread":8,
"tenure":28,
"margin":13,
"loanVariable":{
"type":"roi/commission",
"value":14
}
}
]
}
]
My Solution using normal iteration works:
data.forEach((d, i)=>{
let limitBreakup = d.limitBreakup;
if(Array.isArray(limitBreakup)){
limitBreakup.forEach((l)=>{ console.log(l, '->', l.amount) })
}else{
console.log(limitBreakup, 'else->', limitBreakup.amount)
}
//console.log(d.limitBreakup);
})
But using Recursion, I am half way:
https://jsfiddle.net/1g98sLw3/2/
http://www.mocky.io/v2/5ea974eb3400005e003f0203 (Since the json object is very big, I have pasted in mocky.io for reference)
Something like this should work
Demo proof: https://jsfiddle.net/do58kj3q/
You need a loop to pass through your objects and then add them to the array when you meet the criteria
var data = [{
"limitRequirementId": "123",
"facilityType": "cc",
"amount": 800000,
"existingRoi": 12,
"existingPf": 12100,
"repoRate": 5,
"spread": 10,
"tenure": 24,
"margin": 10000,
"loanVariable": {
"type": "roi/commission",
"value": 15
},
"limitBreakup": [{
"limitRequirementId": "13",
"facilityType": "cc",
"repoRate": 5,
"amount": 8000,
"spread": 10,
"tenure": 24,
"margin": 100,
"loanVariable": {
"type": "roi/commission",
"value": 15
}
},
{
"limitRequirementId": "22",
"facilityType": "LC",
"repoRate": 4,
"amount": 900,
"spread": 6,
"tenure": 21,
"margin": 15,
"loanVariable": {
"type": "roi/commission",
"value": 10
}
}
]
},
{
"limitRequirementUniqueId": "13",
"limitRequirementId": "13",
"facilityType": "lc",
"amount": 900000,
"existingRoi": 10,
"existingPf": 1000,
"repoRate": 3,
"spread": 1,
"tenure": 21,
"margin": 1000,
"loanVariable": {
"type": "roi/commission",
"value": 15
},
"limitBreakup": [{
"limitRequirementId": "35",
"facilityType": "CC",
"repoRate": 6,
"amount": 600,
"spread": 8,
"tenure": 28,
"margin": 13,
"loanVariable": {
"type": "roi/commission",
"value": 14
}
}]
}
]
var array=[];
function recursiveCounter(arr) {
for (let i = 0; i < arr.length; i++) {
const obj = arr[i];
if (!obj.limitBreakup) {
array.push(obj.amount);
}
if (Array.isArray(obj.limitBreakup)) {
recursiveCounter((obj.limitBreakup));
}
}
}
recursiveCounter(data);
console.log(array)

Filter objects by minimum value attributes in javascript

I have an array of objects like below:
[
{
"id": 100,
"Name": "T1",
"amt": 15,
},
{
"id": 102,
"Name": "T3",
"amt": 15,
},
{
"id": 100,
"Name": "T1",
"amt": 20,
},
{
"id": 105,
"Name": "T6",
"amt": 15,
}
]
I want to filter the objects in the array by the minimum of amt. There are two objects with id's 100 but different amt (15 and 20). I want to filter the minimum value which is 15. The output should be:
[
{
"id": 100,
"Name": "T1",
"amt": 15,
},
{
"id": 102,
"Name": "T3",
"amt": 15,
},
{
"id": 105,
"Name": "T6",
"amt": 15,
}
]
I followed this post but does not fit with my problem.
Is there any simpler way of doing this, either pure JavaScript or lodash?
You could group by id and take from every group the object with min value of amt.
var data = [{ id: 100, Name: "T1", amt: 15 }, { id: 102, Name: "T3", amt: 15 }, { id: 100, Name: "T1", amt: 20 }, { id: 105, Name: "T6", amt: 15 }],
result = _(data)
.groupBy('id')
.map(group => _.minBy(group, 'amt'))
.value();
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>
Use the standard algorithm for finding min value and apply the approach to the reduce function. When you find the min or the equal value to the min, add the current object to the array.
const arr = [{
"id": 100,
"Name": "T1",
"amt": 15,
},
{
"id": 102,
"Name": "T3",
"amt": 15,
},
{
"id": 100,
"Name": "T1",
"amt": 20,
},
{
"id": 105,
"Name": "T6",
"amt": 15,
}
]
const minArr = arr.reduce((acc, curr) => curr.amt <= acc.min ? {
...acc,
min: curr.amt,
arr: [...acc.arr, curr]
} : acc, {
min: Infinity,
arr: []
}).arr
console.log(minArr);
You can do this using a for loop like so:
var minimum = 5;
for(var i = 0; i < yourArray; i++) {
if(yourArray[i].amt < minimum) {
console.log("The " + i + " item in the array's amount is less than the minimum: " + minimum);
}
}
Or you can use Array.filter:
var minimum = 5;
function isBigEnough(value) {
return value >= minimum
}
someArray.filter(isBigEnough)

Fuzzy search deep array only on certain properties

I have a JSON dataset which could be very large when it returns, with the following structure for each object:
{
"ctr": 57,
"averageECPC": 23,
"cost": 2732.54,
"margin": 66,
"profit": 2495.9,
"property": {
"value": "Izzby",
"uri": "/Terrago/2"
},
"status": {
"content": "<p>Some Content</p>",
"stage": 1
},
"alerts": {
"status": 2
},
"revenue": {
"value": 2573.13,
"compare": 0
},
"children": [{
"ctr": 79,
"averageECPC": 54,
"cost": 3554.78,
"margin": 88,
"profit": 3145.81,
"property": {
"value": "Comvex",
"uri": "/Octocore/4"
},
"status": {
"content": "<p>Some Content</p>",
"stage": 1
},
"alerts": {
"status": 2
},
"revenue": {
"value": 1247.92,
"compare": 0
}
}]
}
Now I want to search all objects in the array and return only objects which include a string of some sort, but I only want to search certain properties.
I basically have another array which contains the keys I want to search, e.g.
const iteratees = ['ctr', 'property.value', 'status.stage']
I have lodash available within the project, but I have no idea where to start.
Any ideas?
You could use filter(), some() and reduce() to do this.
const iteratees = ['ctr', 'property.value', 'status.stage'];
var searchFor = 'lo';
var result = arr.filter(function(o) {
return iteratees.some(function(e) {
var res = e.split('.').reduce(function(a, b) {
if(a) return a[b];
}, o);
if(res) {
if((res).toString().indexOf(searchFor) != -1) return true;
}
})
})
var arr = [{
"ctr": 'lorem',
"averageECPC": 23,
"cost": 2732.54,
"margin": 66,
"profit": 2495.9,
"property": {
"value": "Izzby",
"uri": "/Terrago/2"
},
"status": {
"content": "<p>Some Content</p>",
"stage": 1
},
"alerts": {
"status": 2
},
"revenue": {
"value": 2573.13,
"compare": 0
},
"children": [{
"ctr": 79,
"averageECPC": 54,
"cost": 3554.78,
"margin": 88,
"profit": 3145.81,
"property": {
"value": "Comvex",
"uri": "/Octocore/4"
},
"status": {
"content": "<p>Some Content</p>",
"stage": 1
},
"alerts": {
"status": 2
},
"revenue": {
"value": 1247.92,
"compare": 0
}
}]
}, {
name: 'lorem',
ctr: 12,
property: {
value: 1
},
status: {
stage: 1
}
}, {
name: 'ipsum'
}]
const iteratees = ['ctr', 'property.value', 'status.stage'];
var searchFor = 'lo';
var result = arr.filter(function(o) {
return iteratees.some(function(e) {
var res = e.split('.').reduce(function(a, b) {
if (a) return a[b];
}, o);
if (res) {
if ((res).toString().indexOf(searchFor) != -1) return true;
}
})
})
console.log(result)

Categories

Resources