Deep copy props that contains object arrays and string arrays - javascript

Goal:
I need to have the props read and writable in the component.
Challenges:
Props are read only. I believe deep coping/cloning will solve this.
I cant figure out how to deep copy the props as it contains different variable types, such as string arrays and object arrays.
These are the variables:
var data = [
{ID: 5, First: "first", Middle: null, Last: "last", Job Listing ID: null, …},
{ID: 6, First: "first", Middle: null, Last: "last", Job Listing ID: null, …},
…
]
var default_refine_toggle_display = [
"ID",
"CV",
"C Letter",
"NDA",
"Photo",
"Address",
"First",
"Middle",
"Last",
"Email",
"Job Title",
"Status",
]
var fake_prop_change_name = {
applicant_id: "ID",
recruiter_id: "Recruiter ID",
cover_letter_id: "C Letter",
nda_id: "NDA",
file_photo_id: "Photo",
resume_cv_id: "CV",
file_address: "Address",
first_name: "First",
middle_name: "Middle",
last_name: "Last",
gender: "Sex",
personal_email: "Email",
building_number: "Building #",
street_number: "Street #",
street_name: "Street Name",
town_name: "Town Name",
state: "State",
country: "Country",
applicant_status_id: "Status ID",
status_datetime_change: "Change Datetime",
why_should_we: "Why Should We",
job_listings_id: "Job Listing ID",
name: "Status",
Job_title_Status: "Job Title",
personal_email:"Email"
}
var column_order = ["applicant_id", "Status","Job_title_Status", 'first_name', "middle_name", "last_name", "personal_email"];
var make_view_file = ["CV", "C Letter", "NDA","Photo","Address"]
This is how those variables are being passed to the component:
<Component_table
default_refine_toggle_display={default_refine_toggle_display}
fake_prop_change_name={fake_prop_change_name}
column_order={column_order}
make_view_file={make_view_file}
data={database_data['Job Applications']}
/>
What I've tried
var props_editable = Array.from(props)
var props_editable = props
What I'm trying:
I was thinking to maybe deep clone each prop individually and then store them in a new array. That way I can handle the deep clone of each prop variable type as it needs.
What are your thoughts on this?
I am finding dealing with arrays and objects to require a lot of brain power for me and cant seem to figure this out.

If you want to clone an array, you could use ES6 spread syntax. It could be helpful in cloning arrays and objects.
Cloning array of objects
var data = [
{
ID: 5,
First: "first",
Middle: null,
Last: "last",
"Job Listing ID": null,
},
{
ID: 6,
First: "first",
Middle: null,
Last: "last",
"Job Listing ID": null,
},
];
const copyData = [...data];
console.log(copyData);
clone an object
const obj = {
name: "Praveen",
address: {
streetName: "Amphitheatre streer",
blockNumber: 8,
Country: "USA",
},
};
const cloneObj = { ...obj };
console.log(obj);
console.log(cloneObj);

Related

Why ng2-tree is showing undefined

I'm using ng2-tree https://angular2-tree.readme.io/v3.2.0/docs/inputs plugin
When i input below json it is showing as undefined
[
{
"value": "helper",
"name": "helper",
"children": []
},
{
"value": "taxi",
"name": "taxi",
"children": []
},
{
"value": "Cake",
"name": "Cake",
"children": [
{
"name": "Chocolate Fudge Cake",
"value": "Chocolate Fudge Cake"
},
{
"name": "Carrot & Walnut Cake",
"value": "Carrot & Walnut Cake"
}
]
}
]
with above json my result is as undefined you can see them in my provided link below
here is the stackblitz link: https://stackblitz.com/edit/angular-ng2-tree-aouyza?file=app/app.component.ts
Please help me thanks in advance!!
Your data structure is wrong. The tree component received as input param a TreeModel and you're having an array of TreeModels at the moment.
Either you adjust your data structure and use a parent TreeModel to wrap your current ones as its children, like following:
tree: TreeModel = {
value: 'Parent Model',
children: [
{
value: 'helper',
name: 'helper',
children: [],
},
{
value: 'taxi',
name: 'taxi',
children: [],
},
{
value: 'Cake',
name: 'Cake',
children: [
{
name: 'Chocolate Fudge Cake',
value: 'Chocolate Fudge Cake',
},
{
name: 'Carrot & Walnut Cake',
value: 'Carrot & Walnut Cake',
},
],
}
]
};
Or you iterate over the array in the HTML and use multiple tree components. That would look like following:
<tree [tree]="t" *ngFor="let t of tree"></tree>
For more information see the Github page of ng2-tree ;)
Update:
You still need to adjust the data model the way I suggested but you can hide the empty root node. To do so, you need to do following:
HTML
<tree [tree]="tree" [settings]="{ rootIsVisible: false }"></tree>
Due to this setting a class rootless is applied which hides the empyt root node but only if you've added node_modules/ng2-tree/styles.css to your angular.json or you've added a custom implementation for that class.
You can find the settings doc here.

Angular Changing/Replacing the value in a string based on the User selection

I am working on an offer letter template that will replace/modify Dynamic Data Points like Name, Address, Role, Salary, etc based on the candidate selected from a list of candidates. There is a fixed syntax for a dynamic data points i.e they will be enclosed within <<>>, for example :
Welcome to the family, <<Name>>
You will be paid <<Salary>> for the duration of your employment.
In other words, these few data points will change by selecting the candidate we want to offer the job and the rest of the template will remain the same. Here is a demo to help you understand.
This is a dummy array I have created with 1 template, In the real-world app, I can have many templates with different clauseNames, so I am looking for a permanent fix.
.ts file, Template List :
[{
templateId: 1,
templateName: "Offer",
clauses: [
{
clauseName: "Introduction",
clauseId: 1,
texts: [
{
text: "Hello <<Name>>, Welcome to the Machine",
textId: 1,
}]
},
{
clauseName: "Address",
clauseId: 2,
texts: [
{
text: "<<Address>>",
textId: 2,
}]
},
{
clauseName: "Date Of Joining",
clauseId: 3,
texts: [
{
text: "You can join us on <<DateOfJoining>>",
textId: 3,
}]
},
]
}]
and here is the candidate list,
candidateList = [
{ name: "Simba", address: "Some Random Cave" },
{ name: "Doe John", address: "line 4, binary avenue, Mobo" },
{ name: "B Rabbit", address: "8 mile road, Detroit" },
{ name: "Peter Griffin", address: "Spooner Street" },
{ name: "Speedy Gonzales", address: "401, hole 34, Slyvester Cat Road" },
{ name: "Morty", address: "Time Machine XYZ" },
{ name: "Brock", address: "pokeball 420, Medic center" },
]
You can use regular expressions to replace those placeholders such as:
var result = text.text.replace(/\<\<(.*?)\>\>/g, function(match, token) {
return candidate[token.toLowerCase()];
});
One way to incorporate this to your display is by creating a property that returns the formatted text.
I have updated your stackblitz here.
Take a look at this demo
I have modified the logic in below method:
showTeplate(name,address,doj) {
this.clauseList = [];
for (let a of this.templateList) {
if (a.clauses != null) {
for (let cl of a.clauses) {
const tempObj = JSON.parse(JSON.stringify(cl));
tempObj.texts.forEach(textObj => {
textObj.text = textObj.text.replace("<<Name>>",name);
textObj.text = textObj.text.replace("<<Address>>",address);
textObj.text = textObj.text.replace("<<DateOfJoining>>",doj);
})
this.clauseList.push(tempObj)
}
}
}
console.log("Clause list", this.clauseList)
}

Destructuring an array of objects (es6)

I'm wondering how to destructure an array of objects. I'm attempting to destructure country from the partner array. It is a project requirement that partner be an array of objects, even though there should only ever be one partner country per obj.
arr = [
{ title: "Title A",
desc: "Desc A",
role: {role_desc: "Role Desc A", role_name: "Role A"},
partner: [{country: "Brazil", region: "SA"}]
},
{ title: "Title B",
desc: "Desc B",
role: {role_desc: "Role Desc B", role_name: "Role B"},
partner: [{country: "US", region: "NA"}]
}
]
I am able to populate a table with data for all fields except partner.
arr.map(
({ title, desc, role: {role_name}, partner: [{country}] }) =>
({ title, desc, role: {role_name}, partner: [{country}] })
);
I've referred to Destructure object properties inside array for all elements and Destructuring an array of objects with es6, and it looks like it is not possible to do this without transforming the data first.
Any help would be appreciated (and apologies for the dupe).
You can simply use default value when you want to handle the case when partner is empty array,
const arr = [{ title: "Title A",desc: "Desc A",role: {role_desc: "Role Desc A", role_name: "Role A"},partner: [{country: "Brazil", region: "SA"}]},{ title: "Title B",desc: "Desc B",role: {role_desc: "Role Desc B", role_name: "Role B"},partner: [{country: "US", region: "NA"}]},{ title: "Title C",desc: "Desc C",role: {role_desc: "Role Desc C", role_name: "Role C"},partner: []}]
const final = arr.map(
({ title, desc, role: {role_name}, partner}) =>
({ title, desc, role: {role_name}, partner:[ {country} = {country: undefined } ] })
);
console.log(final)
That being said we should keep our code as readable as possible, here it becomes so hard on eyes instead of trying to save one extra line, we should opt for making it more readable
const arr = [{ title: "Title A",desc: "Desc A",role: {role_desc: "Role Desc A", role_name: "Role A"},partner: [{country: "Brazil", region: "SA"}]},{ title: "Title B",desc: "Desc B",role: {role_desc: "Role Desc B", role_name: "Role B"},partner: [{country: "US", region: "NA"}]},{ title: "Title C",desc: "Desc C",role: {role_desc: "Role Desc C", role_name: "Role C"},partner: []}]
const final = arr.map(
({ title, desc, role: {role_name}, partner}) => {
let country = partner[0] && partner[0].country || undefined
return { title, desc, role: {role_name}, partner:[ {country}] }
}
);
console.log(final)
I was overlooking a very simple answer due to an equally simple error:
arr.map(
({ title, desc, role: {role_name}, partner}) =>
({ title, desc, role: {role_name}, partner: (partner[0] && partner[0].country) || 'Undefined' })
);
Every item in the array did not necessarily have a "country" property. For certain items, partner is just an empty array. The above fixed the issue.
I agree that it doesn't make sense to make partner an array if it will only ever contain one object. Client requirements, however.

JSON Objects in a JSON Array in javascript

I am playing around with JSON objects in JSON arrays. On click of a button, I push the json objects into a array like below:
jsonArray.push({
columnNameProperty: columnName,
columnValueProerty: columnValue,
id: column.id
});
My resulted array looks like this:
[
0:{
columnNameProperty: "Name",
columnValueProperty: "Nancy",
id: "123"
},
1:{
columnNameProperty: "Name",
columnValueProperty: "Jene",
id: "124"
},
2:{
columnNameProperty: "Amount",
columnValueProperty: "1000",
id: "123"
},
3:{
columnNameProperty: "State",
columnValueProperty: "WA",
id: "123"
}
]
How do I modify this as I want to push items based on the id.
[
"123" : {
"Name" : "Nancy",
"Amount" : "1000",
"State" : "WA"
},
"124" : {
"Name" : "Jene"
}
]
Anyone could suggest me how to structure it in this format.
#Amy is correct, that is not in fact valid javascript. Arrays do not have keys. So your example
[
0:{
columnNameProperty: "Name",
columnValueProperty: "Nancy",
id: "123"
},
1:{
columnNameProperty: "Name",
columnValueProperty: "Jene",
id: "124"
}
]
really looks like this
[
{
columnNameProperty: "Name",
columnValueProperty: "Nancy",
id: "123"
},
{
columnNameProperty: "Name",
columnValueProperty: "Jene",
id: "124"
}
]
If your goal is to retrieve an element by id you could make a function that loops through the array, finds and returns the object with the given id.
Alternatively, you could create a hash map and access each values by its key. So for instance, given this object:
let map = {
"123" : {
"Name" : "Nancy",
"Amount" : "1000",
"State" : "WA"
},
"124" : {
"Name" : "Jene"
}
}
You could get the value of the key "123" by saying map['123']
Why do you have to use an array? For what you are trying to achieve you can set up a object and then just insert more objects into it.
var exampleObject={};
function onClick(){
exampleObject["123"]={"Name":"steve"}
}
I assume you are trying to use that approach to later find the right object in the array?
You can simply loop over the object and find it in there:
for (var obj in exampleObject){
if(obj==="123"){
//do something
}
}
Was able to achieve the required format by creating HashMap/Object:
var id = column.id;
var mapObject = {}, editMap = {};
if(editMap.hasOwnProperty(id)){
mapObject = editMap[id];
mapObject[columnName] = grid[columnName];
editMap[id] = mapObject;
}
else{
mapObject[columnName] = [columnName];
editMap[id] = mapObject;
}

Reorder a JSON collection

I have a JSON array fetch from my server which looks like :
[ {name: "Web Design", id: "27", month_n: "1", data: "68.00"},
{name: "Web Design", id: "27", month_n: "2", data: "56.00"} ,
{name: "Homework", id: "4", month_n: "2", data: "15.00"} ,
{name: "Gaming", id: "12", month_n: "2", data: "5.00"} ]
On the client side, I want to reorder this to have something similar to :
[{name: "Web Design", data:[68.00,56.00]}, {name:"Homework", data:[0,15]} and so on...
Where the "data" value is grouped by the "id" number and the month number (by default 0 if there's no month that match).
What's the best way ? I tried it the pure JavaScript way but I'm getting a hard time ! I have also heard It is easier with underscore JS. But don't know where to start.
Will someone please enlighten me ?
This can be done by two operations:
Groupby [name] field, then
Pluck [data] fields
There are pure JS array prototype extensions libraries to achieve this and many other operations with couple of lines. You may take a look at underscore.js. I have also written a simple JS library jsList. It comes with many unit-tests to use as example.
You only need to write these lines:
var arr = [ {name: "Web Design", id: "27", month_n: "1", data: "68.00"},
{name: "Web Design", id: "27", month_n: "2", data: "56.00"} ,
{name: "Homework", id: "4", month_n: "2", data: "15.00"} ,
{name: "Gaming", id: "12", month_n: "2", data: "5.00"} ];
var temp = arr.groupBy(function(item){ return item.name });
var result = [];
for(var key in temp){
result.push({name: key, data: temp[key].pluck('data')});
}
You may use Object.keys to avoid the for loop, but it only comes with Javascript 1.8.5 or later.
Thanks.
One way to do this in vanilla JavaScript, is to use a helper object as in the following code.
In a first step, we identify all distinct name values and group all data field by them.
In the second step, the helper object is converted back to an array.
var arr = [ {name: "Web Design", id: "27", month_n: "1", data: "68.00"},
{name: "Web Design", id: "27", month_n: "2", data: "56.00"} ,
{name: "Homework", id: "4", month_n: "2", data: "15.00"} ,
{name: "Gaming", id: "12", month_n: "2", data: "5.00"} ];
// use a helper object to identify all distinct "names"
var helper = {};
for( var i=arr.length; i--; ) {
// init an array, if it is not there
helper[ arr[i]['name'] ] = helper[ arr[i]['name'] ] || [];
// add the newest element
helper[ arr[i]['name'] ].push( helper[ arr[i]['data'] ] );
}
// convert back to an array
var newArr = [];
for( var key in helper ) {
if( helper.hasOwnProperty( key ) ) {
newArr.push( { 'name': key, 'data': helper[key] } );
}
}

Categories

Resources