How to push some arrays to the main array in angular 8

How to push some arrays to the main array in angular 8 - javascript

Hi i am working on Angular 7 and I have 3 main arrays fetching from API like mentioned in stackblitz
And now the 3 main arrays look like this.
this.mainarr = [
{ id: 1, name: "Praveen", age: 3, color: 3 },
{ id: 2, name: "kumar", age: 2, color: 4 },
{ id: 3, name: "john", age: 4, color: 2 },
{ id: 4, name: "alex", age: 5, color: 1 },
{ id: 5, name: "profes", age: 3, color: 2 }
];
this.agearr = [
{ id: 1, age: 22 },
{ id: 2, age: 24 },
{ id: 3, age: 33 },
{ id: 4, age: 12 },
{ id: 5, age: 26 }
];
this.colorarr = [
{ id: 1, color: "black" },
{ id: 2, color: "paleblack" },
{ id: 3, color: "brown" },
{ id: 4, color: "white" },
{ id: 5, color: "greyish" }
];
So, in the mainarr i have ids and the agearr and colorarr id matched i need a different key value pair in mainarr and display that values.
so my expected result should be
[
{ id: 1, name: "Praveen", age: 3, color: 3,agename: 33,colorname: 'brown'},
{ id: 2, name: "kumar", age: 2, color: 4,agename: 24,colorname: 'white'},
{ id: 3, name: "john", age: 4, color: 2 agename: 12,colorname:'paleblack'},
{ id: 4, name: "alex", age: 5, color: 1 agename: 26,colorname:'black'},
{ id: 5, name: "profes", age: 3, color: 2 agename: 33,colorname:'paleblack'}
];
I am getting the desired result but only after page refresh how to do it any idea?TIA

Here is the updated stackblitz
In the if block you were checking for the wrong property. Corrected it.
if (this.mainarr[i].age == this.agearr[j].id)

Try like following:
getFunction() {
this.mainarr.map(x => {
x["agename"] = this.agearr.find(y => y.id == x.age)["age"];
x["colorname"] = this.colorarr.find(y => y.id == x.color)["color"];
});
console.log(this.mainarr);
}
Working Stackbllitz Example: https://stackblitz.com/edit/angular-ivy-ve5cdp?file=src/app/app.component.ts

Related

Build nested object array from recursive function

How would i utilize my getChildren() function to create a larger function which takes my two main arrays objs and objRefs and outputs a single array of objs demonstrating their parent/child relationship.
here are the two main data arrays
const objs = [
{ name: "Kevin", age: 5, id: 1 },
{ name: "Matt", age: 53, id: 5 },
{ name: "Marry", age: 30, id: 2 },
{ name: "Leslie", age: 21, id: 3 },
{ name: "Sarah", age: 46, id: 4 },
{ name: "Heather", age: 37, id: 6 },
{ name: "Cory", age: 19, id: 7 },
]
const objRefs = [
{ parent_id: 5, obj_id: 7 }, // cory child of matt
{ parent_id: null, obj_id: 6 }, // matt root
{ parent_id: null, obj_id: 4 }, // sarah root
{ parent_id: null, obj_id: 5 }, // heather root
{ parent_id: 5, obj_id: 3 }, // leslie child of matt
{ parent_id: 4, obj_id: 2 }, // mary child of sarah
{ parent_id: 3, obj_id: 1 }, // kevin child of leslie
]
My goal is to run a function called getFamilyTree() which would return me this...
const tree = [
{
id: 5,
name: "Matt",
age: 53,
children:[
{
id: 3,
name: "Leslie",
age: 21,
children:[
{
id: 1,
name: "Kevin",
age: 5,
children:[ ]
}
]
},
{
id: 7,
name: "Cory",
age: 19,
children:[ ]
}
]
},
{
id: 6,
name: "Heather",
age: 37,
children:[ ]
},
{
id: 4,
name: "Sarah",
age: 46,
children:[
{
id: 2,
name: "Marry",
age: 30,
children:[ ]
}
]
}
]
I have a function that returns me all the children for the given parent node id, but im not sure how structure a function to return me the entire tree like my example.
function getChildren(parent_id) {
let children = []
for (var i = 0; i < objRefs.length; i++) {
const ref = objRefs[i]
if (ref.parent_id === parent_id) {
const obj = objs.find(obj => {
return obj.id === ref.obj_id
})
children.push(obj)
}
}
return children
}
function getFamilyTree() {
let result = []
... // build recursive family tree
return result
}

You don't need a recursive function to construct that.
To get a reasonable time complexity, store all the objs to a Map or something (if the ids are sequential, even an array will work) keyed by id. Then, just iterate over objRefs and construct the relations appropriately:
const objs = [
{ name: "Kevin", age: 5, id: 1 },
{ name: "Matt", age: 53, id: 5 },
{ name: "Marry", age: 30, id: 2 },
{ name: "Leslie", age: 21, id: 3 },
{ name: "Sarah", age: 46, id: 4 },
{ name: "Heather", age: 37, id: 6 },
{ name: "Cory", age: 19, id: 7
},
]
const objRefs = [
{ parent_id: 5, obj_id: 7 }, // cory child of matt
{ parent_id: null, obj_id: 6 }, // matt root
{ parent_id: null, obj_id: 4 }, // sarah root
{ parent_id: null, obj_id: 5 }, // heather root
{ parent_id: 5, obj_id: 3 }, // leslie child of matt
{ parent_id: 4, obj_id: 2 }, // mary child of sarah
{ parent_id: 3, obj_id: 1 }, // kevin child of leslie
]
function getFamilyTree(objs, objRefs){
const tree = []
const map = new Map(
objs.map(e => [e.id, { ...e, children: [] }])
)
for(const {parent_id, obj_id} of objRefs){
if(parent_id === null){
tree.push(map.get(obj_id))
}else{
map.get(parent_id).children.push(map.get(obj_id))
}
}
return tree
}
const tree = getFamilyTree(objs, objRefs)
console.log(tree)

I don't think you even need the getChildren function to actually build your tree. Using Maps instead could be useful:
const objs = [
{ name: "Kevin", age: 5, id: 1 },
{ name: "Matt", age: 53, id: 5 },
{ name: "Marry", age: 30, id: 2 },
{ name: "Leslie", age: 21, id: 3 },
{ name: "Sarah", age: 46, id: 4 },
{ name: "Heather", age: 37, id: 6 },
{ name: "Cory", age: 19, id: 7 },
]
const objRefs = [
{ parent_id: 5, obj_id: 7 }, // cory child of matt
{ parent_id: null, obj_id: 6 }, // matt root
{ parent_id: null, obj_id: 4 }, // sarah root
{ parent_id: null, obj_id: 5 }, // heather root
{ parent_id: 5, obj_id: 3 }, // leslie child of matt
{ parent_id: 4, obj_id: 2 }, // mary child of sarah
{ parent_id: 3, obj_id: 1 }, // kevin child of leslie
]
function getFamillyTree(){
const nodes = new Map()
// Preparing the data nodes
objs.forEach(elt => nodes.set(elt.id, {...elt, children: [], root: false}))
// Linking the nodes to make the parent <-> children relations
objRefs.filter(rel => !!rel.parent_id).forEach(rel => {
const parent = nodes.get(rel.parent_id)
parent.children.push(nodes.get(rel.obj_id))
})
// Marking the roots
objRefs.filter(rel => rel.parent_id === null).forEach(rel => {
const obj = nodes.get(rel.obj_id)
obj.root = true
})
return Array.from(nodes.values()).filter(obj => obj.root)
}
document.write(JSON.stringify(getFamillyTree(), null, 4))
Edit: This answer can be slightly off, because as Nina stated in a comment on the question, OP seems to ask for an explicitly recursive solution, leaving this here for reference.

You could use some object as reference to the persons and their relations and map the nodes with their children.
const
getChildren = parent => (references[parent] || []).map(id => ({
...nodes[id],
children: getChildren(id)
})),
people = [{ name: "Kevin", age: 5, id: 1 }, { name: "Matt", age: 53, id: 5 }, { name: "Marry", age: 30, id: 2 }, { name: "Leslie", age: 21, id: 3 }, { name: "Sarah", age: 46, id: 4 }, { name: "Heather", age: 37, id: 6 }, { name: "Cory", age: 19, id: 7 }],
children = [{ parent_id: 5, obj_id: 7 }, { parent_id: null, obj_id: 6 }, { parent_id: null, obj_id: 4 }, { parent_id: null, obj_id: 5 }, { parent_id: 5, obj_id: 3 }, { parent_id: 4, obj_id: 2 }, { parent_id: 3, obj_id: 1 }],
nodes = Object.fromEntries(people.map(o => [o.id, o])),
references = children.reduce((r, { parent_id, obj_id }) => ((r[parent_id] ??= []).push(obj_id), r), {}),
tree = getChildren(null);
console.log(tree);
.as-console-wrapper { max-height: 100% !important; top: 0; }
An approach with a single loop of children.
const
getTree = (people, children, root) => {
const
nodes = Object.fromEntries(people.map(o => [o.id, o])),
t = {};
children.forEach(({ parent_id: p, obj_id: id }) =>
((t[p] ??= {}).children ??= []).push(Object.assign(t[id] ??= {}, nodes[id]))
);
return t[root].children;
},
people = [{ name: "Kevin", age: 5, id: 1 }, { name: "Matt", age: 53, id: 5 }, { name: "Marry", age: 30, id: 2 }, { name: "Leslie", age: 21, id: 3 }, { name: "Sarah", age: 46, id: 4 }, { name: "Heather", age: 37, id: 6 }, { name: "Cory", age: 19, id: 7 }],
children = [{ parent_id: 5, obj_id: 7 }, { parent_id: null, obj_id: 6 }, { parent_id: null, obj_id: 4 }, { parent_id: null, obj_id: 5 }, { parent_id: 5, obj_id: 3 }, { parent_id: 4, obj_id: 2 }, { parent_id: 3, obj_id: 1 }],
tree = getTree(people, children, null);
console.log(tree);
.as-console-wrapper { max-height: 100% !important; top: 0; }

JS How to get matching id between 2 array object

How do I get 2 matching id between 2 array object using javascript?
// Array 1
const array1 = [
{id: 1, name: 'milla'},
{id: 2, name: 'alice'}
]
// Array 2
const array2 = [
{id: 3, name: 'bobba', height: '170cm', age: 22},
{id: 2, name: 'alice', height: '169cm', age: 21},
{id: 1, name: 'milla', height: '171cm', age: 24},
{id: 4, name: 'ricky', height: '168cm', age: 32},
]
the expected output is to returned array of object of Array2 that mached with id's on array1
// expected result
[
{id: 2, name: 'alice', height: '169cm', age: 21},
{id: 1, name: 'milla', height: '171cm', age: 24},
]

You could filter and look if the same id exists.
const
array1 = [{ id: 1, name: 'milla' }, { id: 2, name: 'alice' }],
array2 = [{ id: 3, name: 'bobba', height: '170cm', age: 22 }, { id: 2, name: 'alice', height: '169cm', age: 21 }, { id: 1, name: 'milla', height: '171cm', age: 24 }, { id: 4, name: 'ricky', height: '168cm', age: 32 }],
hash = array1.reduce((r, { id }) => (r[id] = true, r), {}),
filtered = array2.filter(({ id }) => hash[id]);
console.log(filtered);

The most efficient way to do this is to generate a map of the IDs in array1 and then filter array2 against those IDs, like so:
let array1 = [{ id: 1, name: 'milla' }, { id: 2, name: 'alice' }];
let array2 = [{ id: 3, name: 'bobba', height: '170cm', age: 22 }, { id: 2, name: 'alice', height: '169cm', age: 21 }, { id: 1, name: 'milla', height: '171cm', age: 24 }, { id: 4, name: 'ricky', height: '168cm', age: 32 }];
let idMap = array1.reduce((res, curr) => (res[curr.id] = true, res), {});
let filtered = array2.filter((item) => idMap[item.id]);
console.log(filtered)

Honestly, this is basic JS, but anyway, here's the solution:
const array1 = [
{id: 1, name: 'milla'},
{id: 2, name: 'alice'}
]
// Array 2
const array2 = [
{id: 3, name: 'bobba', height: '170cm', age: 22},
{id: 2, name: 'alice', height: '169cm', age: 21},
{id: 1, name: 'milla', height: '171cm', age: 24},
{id: 4, name: 'ricky', height: '168cm', age: 32},
]
const map = array1.reduce((a, c) => ({ ...a, [c.id]: true }), {});
const array3 = array2.filter(item => map[item.id]);
console.log(array3);

How to convert array of objects into custom grouped array

I am trying to convert the data object to custom format
This is my data which i want to convert
[
{ Name: 15, GroupID: 1, Id: 1 },
{ Name: 16, GroupID: 1, Id: 1 },
{ Name: 17, GroupID: 2, Id: 2 },
{ Name: 18, GroupID: 2, Id: 2 },
{ Name: 15, GroupID: 3, Id: 3 },
{ Name: 16, GroupID: 3, Id: 3 },
{ Name: 17, GroupID: 4, Id: 4 },
{ Name: 18, GroupID: 4, Id: 4 }
];
This is what i want to acheive
{ GroupID: 1 },
{ Name: 15, Id: 1 },
{ Name: 16, Id: 1 },
{ GroupID: 2 },
{ Name: 17, Id: 2 },
{ Name: 18, Id: 2 },
{ GroupID: 3 },
{ Name: 15, Id: 3 },
{ Name: 16, Id: 3 },
{ GroupID: 4 },
{ Name: 17, Id: 4 },
{ Name: 18, Id: 4 }
This is what i have tried till now
var data = [
{ Name: 15, GroupID: 1, Id: 1 },
{ Name: 16, GroupID: 1, Id: 1 },
{ Name: 17, GroupID: 2, Id: 2 },
{ Name: 18, GroupID: 2, Id: 2 },
{ Name: 15, GroupID: 3, Id: 3 },
{ Name: 16, GroupID: 3, Id: 3 },
{ Name: 17, GroupID: 4, Id: 4 },
{ Name: 18, GroupID: 4, Id: 4 }
];
var previousGroupId;
var newObject = new Object();
for (index in data) {
var groupId = data[index].GroupID;
if (groupId != previousGroupId) {
var newGroup = "GroupId" + groupId;
newObject[newGroup] = new Array();
for (index in data) {
if (data[index].GroupID == groupId) {
var customObject = {
"GroupID": groupId,
"Name": data[index].Name,
"Id": data[index].Id
};
newObject[newGroup].push(customObject);
}
}
}
previousGroupId = groupId;
}
console.log(newObject);
even i tried to refer this
Javascript group objects by property
any suggestions would be helpful.

Assuming an array of objects as result set, you could take a hash table with arrays and take a flat array as result set.
var data = [{ Name: 15, GroupID: 1, Id: 1 }, { Name: 16, GroupID: 1, Id: 1 }, { Name: 17, GroupID: 2, Id: 2 }, { Name: 18, GroupID: 2, Id: 2 }, { Name: 15, GroupID: 3, Id: 3 }, { Name: 16, GroupID: 3, Id: 3 }, { Name: 17, GroupID: 4, Id: 4 }, { Name: 18, GroupID: 4, Id: 4 }],
result = Object
.values(data.reduce((r, { Name, GroupID, Id }) => {
r[GroupID] = r[GroupID] || [{ GroupID }];
r[GroupID].push({ Name, Id });
return r;
}, {}))
.flat();
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }

How to add object element in array based on condition

I have static array constant of objects something similar to below.
export const EMPLOYEES = [
{
id: 2,
name: ‘John’,
},
{
id: 3,
name: ‘Doe’,
},
{
id: 4,
name: ‘Bull’,
},
{
id: 5,
name: ‘Scott’,
},
];
Now I need to add the last element only based on if some condition is true. Some this like if isAmerican() is true.
Can somebody help me here how to add element based on the condition? Thanks.

You can do it using spread operator:
export const EMPLOYEES = [
{
id: 2,
name: "John",
},
{
id: 3,
name: "Doe",
},
{
id: 4,
name: "Bull",
},
{
id: 5,
name: "Scott",
},
... isAmerican() ? [{ id: 6, name: "Jemmy"}] : []
];

You should never modify (or try to modify) a constant. I can see two ways you can do this:
Create a pure function to return a new constant with the new object added to the array
Use a spread operator in the definition of the constant
Option 1: Pure function
function makeNewArray(array, objectToAppend, isAmerican) {
return isAmerican ? [...array, objectToAppend] : array
}
const EMPLOYEES = [
{
id: 2,
name: "John",
},
{
id: 3,
name: "Doe",
},
{
id: 4,
name: "Bull",
},
{
id: 5,
name: "Scott",
}
];
const arrayWithAmerican = makeNewArray(EMPLOYEES, { id: 6, name: "American Frank"}, true);
const arrayWithoutAmerican = makeNewArray(EMPLOYEES, { id: 6, name: "Not American Frank"}, false);
console.log(arrayWithAmerican);
console.log(arrayWithoutAmerican);
Option 2: Spread operator
function isAmerican(){
// generic code here.
return true;
}
const EMPLOYEES = [
{
id: 2,
name: "John",
},
{
id: 3,
name: "Doe",
},
{
id: 4,
name: "Bull",
},
{
id: 5,
name: "Scott",
},
... isAmerican() ? [{ id: 6, name: "American Frank"}] : []
];

If the condition will be fulfilled, simply push an object to your EMPLOYEES array:
let isAmerican = true;
const EMPLOYEES = [
{
id: 2,
name: "John",
},
{
id: 3,
name: "Doe",
},
{
id: 4,
name: "Bull",
},
{
id: 5,
name: "Scott",
},
];
if(isAmerican) {
EMPLOYEES.push({
id: 6,
name: "Frank"
})
}
console.log(EMPLOYEES)
Fiddle: https://jsfiddle.net/rqx35pLz/

Expand/Collapse all the gof kendoTreeList

I am using kendoTreeList
and I am trying to expand all the groups. Here is my code sample
But it seems like the kendoTreeList support only expanding the first group. I tried the following selector in the expand method as well.
treeList.expand($(".k-treelist-group")); to expand all the groups. Even though the selector $(".k-treelist-group").length is 3 (total number of groups) but the treelist only expand the first group.
Any suggestion please let me know.

You are right, according with the information on their site it expands the row and not the rows.
Then you can iterate for getting the same effect:
var treeList = $("#treeList").data("kendoTreeList");
var rows = $("tr.k-treelist-group", treeList.tbody);
$.each(rows, function(idx, row) {
treeList.expand(row);
});
$(document).ready(function() {
$("#treeList").kendoTreeList({
columns: [ "id", "name" ],
loadOnDemand:false,
dataSource: [
{ id: 1, parentId: null, name: "Group", age: 30 },
{ id: 2, parentId: 1, name: "John Doe", age: 33 },
{ id: 3, parentId: 1, name: "Johson", age: 33 },
{ id: 4, parentId: null, name: "Group 2", age: 30 },
{ id: 5, parentId: 4, name: "Doe ", age: 33 },
{ id: 6, parentId: 4, name: "Noomi", age: 33 },
{ id: 7, parentId: null, name: "Group 3", age: 30 },
{ id:8, parentId: 7, name: "Doe ", age: 33 },
{ id: 9, parentId: 7, name: "Noomi", age: 33 }
]
});
var treeList = $("#treeList").data("kendoTreeList");
var rows = $("tr.k-treelist-group", treeList.tbody);
$.each(rows, function(idx, row) {
treeList.expand(row);
});
});
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
<div id="treeList"></div>

If you expand many rows you can get into some performance issues, then one alternative to looping the .expand method is to modify the data and bind it again.
var treeList = $("#treeList").data("kendoTreeList");
var dataItems = treeList.dataSource.data();
$.each(dataItems, function(i, item) {
item.expanded = true;
});
treeList.dataSource.data(dataItems);
You can also modify the data before it's bound.
dataSource: {
data: [
{ id: 1, parentId: null, name: "Group", age: 30 },
{ id: 2, parentId: 1, name: "John Doe", age: 33 },
{ id: 3, parentId: 1, name: "Johson", age: 33 },
{ id: 4, parentId: null, name: "Group 2", age: 30 },
{ id: 5, parentId: 4, name: "Doe ", age: 33 },
{ id: 6, parentId: 4, name: "Noomi", age: 33 },
{ id: 7, parentId: null, name: "Group 3", age: 30 },
{ id:8, parentId: 7, name: "Doe ", age: 33 },
{ id: 9, parentId: 7, name: "Noomi", age: 33 }
],
schema: {
parse: function(data) {
$.each(data, function(i, item) {
item.expanded = true;
});
return data;
}
}
}

Develop Reference

JavaScript is the programming language of the Web.

How to push some arrays to the main array in angular 8 - javascript

Here is the updated stackblitz In the if block you were checking for the wrong property. Corrected it. if (this.mainarr[i].age == this.agearr[j].id)

Related

Build nested object array from recursive function

JS How to get matching id between 2 array object

How to convert array of objects into custom grouped array

How to add object element in array based on condition

Expand/Collapse all the gof kendoTreeList

Categories

Resources