Develop Reference

How to loop through an array of objects and add a new field using react and javascript?

i want to loop through array of objects and check for a particular property and add a new property "disabled" to the array.
below is the array of objects
const arr_obj = [
{
id: "1",
name: "name1",
type: "type2",
children: [
{
id: "2",
name: "name2",
type: "type4",
children: [
{
id: "3",
name: "name3",
type: "type5",
},
},
{
id: "4",
name: "name4",
type: "type3",
children: [
{
id: "5",
name: "name5",
type: "type4",
children: [],
},
],
},
id: "6",
name: "name6",
type: "type3",
children: [
{
id: "7",
name: "name7",
type: "type4",
children: [],
},
],
}
},
.....//similar objects
];
so from above array of objects i want to check for each object if type === type2 and if type2 then add property disabled: false if not disabled: true.
below is what i have tried
const new_obj = React.useMemo(() => {
return arr_obj.map((arr) => ({
...arr,
disabled: arr?.type !== "type2" ? true : false,
}));
}, [arr_obj]);
this adds disabled property only to outer object it doesnt add to children object.
output with above snippet is like below,
const new_arr = [
{
id: "1",
name: "name1",
type: "type2",
disabled: false,
children: [
{
id: "2",
name: "name2",
type: "type4",
children: [
{
id: "3",
name: "name3",
type: "type5",
},
},
{
id: "4",
name: "name4",
type: "type3",
children: [
{
id: "5",
name: "name5",
type: "type4",
children: [],
},
],
},
id: "6",
name: "name6",
type: "type3",
children: [
{
id: "7",
name: "name7",
type: "type4",
children: [],
},
],
}
},
.....//similar objects
];
expected output is like below,
const new_arr = [
{
id: "1",
name: "name1",
type: "type2",
disabled: false,
children: [
{
id: "2",
name: "name2",
type: "type4",
disabled: true,
children: [
{
id: "3",
name: "name3",
type: "type5",
disabled: true,
},
},
{
id: "4",
name: "name4",
type: "type3",
disabled: true,
children: [
{
id: "5",
name: "name5",
type: "type4",
disabled: true,
children: [],
},
],
},
id: "6",
name: "name6",
type: "type3",
disabled: true
children: [
{
id: "7",
name: "name7",
type: "type4",
disabled: true,
children: [],
},
],
}
},
.....//similar objects
];
How can i fix the above snippet such that it adds disabled property to children too. could someone help me with this. thanks.
EDIT:
tried answer is like below,
function loop_children(children) {
if (!children || children.lengh <=0) {
return;
} else {
return children.map((child) => {
...child,
disabled: child?.type !== "type2" ? true : false,
children: loop_children(children)
})
};
}
}
return arr_obj.map((arr) => ({
...arr,
disabled: arr?.type !== "type2" ? true : false,
children: loop_children(arr.children) //seems like a problem here in adding children field again
}));
but this adds children array under children again.
This code doesnt work. it adds field disabled to children but also adds children within children.
could someone help me with this. thanks.

Not sure why all the others are mapping, just alter the object with a simple recursive call when it has a children property.
const arr_obj = [{
id: "1",
name: "name1",
type: "type2",
children: [{
id: "2",
name: "name2",
type: "type4",
children: [{
id: "3",
name: "name3",
type: "type5",
}, ]
}, ]
}];
const disableEnableObj = (arr, type) => {
arr.forEach(obj => {
obj.disabled = obj.type !== type;
obj.children && disableEnableObj(obj.children, type);
});
}
disableEnableObj(arr_obj, 'type2');
console.log(arr_obj);

You have to loop through the children too. It should look something like this:
function loop_children(children) {
return children.map((child) => {
...child,
disabled: child?.type !== "type2" ? true : false,
children: loop_children(children)
})
}
return arr_obj.map((arr) => ({
...arr,
disabled: arr?.type !== "type2" ? true : false,
children: loop_children(children)
}));

Compare id of two array, then set value equa to an array

I have two array like this:
let arr1 = [
{id: "1", icon: Images.icon.food, checkable: false, text: 'Dine-in', description: "coupon for dine in"},
{id: "2", icon: Images.icon.delivery, checkable: false, text: 'Delivery', description: "coupon for delivery"},
{id: "3", icon: Images.icon.collection, checkable: false, text: 'Collection', description: "coupon for collection"},
]
let arr2 = [
{description: "Dine in Service", id: "13", isActive: false, name: "Dine In", serviceDetail: null, serviceId: "1", slug: "dine-in"},
{description: "Delivery Service", id: "14", isActive: true, name: "Delivery", serviceDetail: null, serviceId: "2", slug:"delivery"},
{description: "Collection Service", id: "15", isActive: true, name: "Collection", serviceDetail: null, serviceId: "3", slug: "collection"}
]
How to compare id of arr1 equa to serviceId of arr2, and then set value checkable in arr1 equa to isActice in arr2
This is result I want to be:
result = [
{id: "1", icon: Images.icon.food, checkable: false, text: 'Dine-in', description: "coupon for dine in"},
{id: "2", icon: Images.icon.delivery, checkable: true, text: 'Delivery', description: "coupon for delivery"},
{id: "3", icon: Images.icon.collection, checkable: true, text: 'Collection', description: "coupon for collection"},
]
Means result like arr1 but change checkable equa to isActive of arr2.
Thank you.

Use can simply use find and use an arrow function to define the comparision expression. And then you can simply do the attribution directly
let arr1 = [
{id: "1", icon: 'food', checkable: false, text: 'Dine-in', description: "coupon for dine in"},
{id: "2", icon: 'delivery', checkable: false, text: 'Delivery', description: "coupon for delivery"},
{id: "3", icon: 'collection', checkable: false, text: 'Collection', description: "coupon for collection"},
];
let arr2 = [
{description: "Dine in Service", id: "13", isActive: false, name: "Dine In", serviceDetail: null, serviceId: "1", slug: "dine-in"},
{description: "Delivery Service", id: "14", isActive: true, name: "Delivery", serviceDetail: null, serviceId: "2", slug:"delivery"},
{description: "Collection Service", id: "15", isActive: true, name: "Collection", serviceDetail: null, serviceId: "3", slug: "collection"}
];
for(let i = 0; i < arr1.length; i++){
arr1[i].checkable = arr2.find(x => x.serviceId == arr1[i].id).isActive;
console.log(arr1[i]);
}
If you prefer a one line forEach
arr1.forEach((array1) => array1.checkable = arr2.find(x => x.serviceId == array1.id).isActive );

You could collect all active states in an object and map new object with the state.
let arr1 = [{ id: "1", icon: 'Images.icon.food', checkable: false, text: 'Dine-in', description: "coupon for dine in" }, { id: "2", icon: 'Images.icon.delivery', checkable: false, text: 'Delivery', description: "coupon for delivery" }, { id: "3", icon: 'Images.icon.collection', checkable: false, text: 'Collection', description: "coupon for collection" }],
arr2 = [{ description: "Dine in Service", id: "13", isActive: false, name: "Dine In", serviceDetail: null, serviceId: "1", slug: "dine-in" }, { description: "Delivery Service", id: "14", isActive: true, name: "Delivery", serviceDetail: null, serviceId: "2", slug:"delivery" }, { description: "Collection Service", id: "15", isActive: true, name: "Collection", serviceDetail: null, serviceId: "3", slug: "collection" }],
isActive = Object.fromEntries(arr2.map(({ serviceId, isActive }) => [serviceId, isActive])),
result = arr1.map(o => ({ ...o, isActive: isActive[o.id] }));
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }

How to change property value in array object with array values in javascript

How to change property in the object array based on array of values in javascript,
I have object obj and parameter as list, should changed the property checked to true, if title matched with the list in javascript
if the title is matched with list and has children, then checked: true
ie.countries title is matched with list , then children also change the property checked: true
if the children title is matched , then change checked: true for that object only
ie.clothes title is matched with list , then change the property checked: true for that object only
I stuck to do with list of arrays as param,
var obj = [{
title: "Sample",
checked: false,
children: [{
title: "products",
checked: false,
children: [{
title: "clothes",
id: 1,
checked: false
},
{
title: "electronics",
id: 2,
checked: false
}
]
},
{
title: "countries",
checked: false,
children: [{
title: "IN",
id: 1,
checked: false
},
{
title: "TH",
id: 2,
checked: false
}
]
}
]
}];
var list = ["clothes", "countries"];
Expected Output:
[{
title: "Sample",
checked: false,
children: [
{
title: "products",
checked: false,
children: [
{title: "clothes", id: 1, checked: true},
{title: "electronics", id: 2, checked: false}
]
},{
title: "countries",
checked: true,
children: [
{title: "IN", id: 1, checked: true},
{title: "TH", id: 2, checked: true}
]
}
]
}]

You need some recursion, to handle any depth of nesting:
With this solution, it is very generic, you can change the childrenProp, matchProp, checkedProp etc. and it will allow you to search as deep as you need to in a nested structure.
const obj = [
{
title: "Sample",
checked: false,
children: [
{
title: "products",
checked: false,
children: [
{title: "clothes", id: 1, checked: false},
{title: "electronics", id: 2, checked: false}
]
},
{
title: "countries",
checked: false,
children: [
{title: "IN", id: 1, checked: false},
{title: "TH", id: 2, checked: false}
]
}
]
}
];
var list=["clothes", "countries"];
checkPropertyForMatch(obj, list);
console.log(obj);
checkPropertyForMatch(obj, ['electronics']);
console.log(obj);
function checkPropertyForMatch(inputArr, matchList, matchProp, childrenProp, checkedProp){
//default params, or they can be overwritten:
matchProp = matchProp || 'title';
childrenProp = childrenProp || 'children';
checkedProp = checkedProp || 'checked';
innerRecursive(inputArr, matchList);
//recursively search the nested object:
function innerRecursive(currArr, list){
for (item of currArr){
if ( list.includes(item[matchProp]) ){
item[checkedProp] = true;
if (item[childrenProp]){
//this parent matched, so mark all children as marked too:
markAllChildrenChecked(item[childrenProp]);
}
}
else {
item[checkedProp] = false;
if (item[childrenProp]) {
//it didn't match but it has children, so search them too:
innerRecursive(item[childrenProp], list)
}
}
}
}
//this recursively marks all children as checked = true:
function markAllChildrenChecked(currArr){
for (item of currArr){
item[checkedProp] = true;
if (item[childrenProp]){
markAllChildrenChecked(item[childrenProp]);
}
}
}
}
.as-console-wrapper { max-height: 100% !important; top: 0; }
Output:
[
{
"title": "Sample",
"checked": false,
"children": [
{
"title": "products",
"checked": false,
"children": [
{"title": "clothes", "id": 1, "checked": true},
{"title": "electronics", "id": 2, "checked": false}
]
},
{
"title": "countries",
"checked": true,
"children": [
{"title": "IN", "id": 1, "checked": true},
{"title": "TH", "id": 2, "checked": true}
]
}
]
}
]

The trick here is below:
if (list.indexOf(ele.title) > -1 || list.indexOf(el.title) > -1) {
el.checked = true;
}
var obj = [{
title: "Sample",
checked: false,
children: [{
title: "products",
checked: false,
children: [{
title: "clothes",
id: 1,
checked: false
},
{
title: "electronics",
id: 2,
checked: false
}
]
},
{
title: "countries",
checked: false,
children: [{
title: "IN",
id: 1,
checked: false
},
{
title: "TH",
id: 2,
checked: false
}
]
}
]
}];
var list = ["clothes", "countries"];
obj.forEach(elem => {
elem.children.forEach(ele => {
ele.children.forEach(el => {
if (list.indexOf(ele.title) > -1 || list.indexOf(el.title) > -1) {
el.checked = true;
}
})
})
})
console.log(obj)

tabulator is not a function

I am following quick start guide in tabulator(v4.2+) - http://tabulator.info/docs/4.2/quickstart which worked as expected, when I included a button click function inside my html script I get .tabulator is not a function error and the table variable seems to be printing undefined in the browser console,
When i try to print in the browser console it returns table object but not console.log from the code
var tabledata = [{
id: 1,
name: "Oli Bob",
age: "12",
col: "red",
dob: ""
}, {
id: 2,
name: "Mary May",
age: "1",
col: "blue",
dob: "14/05/1982"
}, {
id: 3,
name: "Christine Lobowski",
age: "42",
col: "green",
dob: "22/05/1982"
}, {
id: 4,
name: "Brendon Philips",
age: "125",
col: "orange",
dob: "01/08/1980"
}, {
id: 5,
name: "Margret Marmajuke",
age: "16",
col: "yellow",
dob: "31/01/1999"
}, ];
table = new Tabulator("#example-table", {
height: 200,
data: tabledata,
layout: "fitColumns",
columns: [{
title: "Name",
field: "name",
width: 150
}, {
title: "Age",
field: "age",
align: "left",
formatter: "progress"
}, {
title: "Favourite Color",
field: "col"
}, {
title: "Date Of Birth",
field: "dob",
sorter: "date",
align: "center"
}, ],
rowClick: function(e, row) {
alert("Row " + row.getData().id + " Clicked!!!!");
},
});
console.log(table);
$("#savebtn").click(function(e) {
e.preventDefault()
console.log(table)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://unpkg.com/tabulator-tables#4.2.7/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables#4.2.7/dist/js/tabulator.min.js"></script>
<div class="form-group">
<label for="comment2"></label>
<div id="example-table"></div>
</div>
<input type="submit" value="Save" id="savebtn" />
The error is coming in this part of the code when the button click happens, table object is printing as undefined ?
$("#savebtn").click(function(e) {
e.preventDefault()
console.log(table)
});

Use var keyword
var table = new Tabulator(
const tabledata = [{
id: 1,
name: "Oli Bob",
age: "12",
col: "red",
dob: ""
}, {
id: 2,
name: "Mary May",
age: "1",
col: "blue",
dob: "14/05/1982"
}, {
id: 3,
name: "Christine Lobowski",
age: "42",
col: "green",
dob: "22/05/1982"
}, {
id: 4,
name: "Brendon Philips",
age: "125",
col: "orange",
dob: "01/08/1980"
}, {
id: 5,
name: "Margret Marmajuke",
age: "16",
col: "yellow",
dob: "31/01/1999"
}, ];
const table = new Tabulator("#example-table", {
height: 200,
data: tabledata,
layout: "fitColumns",
columns: [{
title: "Name",
field: "name",
width: 150
}, {
title: "Age",
field: "age",
align: "left",
formatter: "progress"
}, {
title: "Favourite Color",
field: "col"
}, {
title: "Date Of Birth",
field: "dob",
sorter: "date",
align: "center"
}, ],
rowClick: function(e, row) {
alert("Row " + row.getData().id + " Clicked!!!!");
},
});
console.log(table.getData());
$("#savebtn").click(function(e) {
// e.preventDefault()
// console.log(table.getData());
});
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://unpkg.com/tabulator-tables#4.2.7/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables#4.2.7/dist/js/tabulator.min.js"></script>
</head>
<body>
<div class="form-group">
<label for="comment2"></label>
<div id="example-table"></div>
</div>
<input type="submit" value="Save" id="savebtn" />
</body>
</html>

Sum column tabulator based on condition

I am trying to sum column value in tabulator with specific condition and follow this Custom Calculation Function
What I tried so far:
$(document).ready(function() {
function getSum(total, num) {
return total + num;
}
var adultCalc = function(values, data, calcParams) {
var tempvalue = [];
data.forEach(function(data) {
var count = data.age * data.qty;
tempvalue.push(count);
});
console.log('array', tempvalue);
console.log('total', tempvalue.reduce(getSum));
/*return tempvalue;*/
}
var tabledata = [{
id: 1,
name: "Oli Bob",
age: "12",
qty: "1",
dob: ""
},
{
id: 3,
name: "Christine Lobowski",
age: "42",
qty: "1",
dob: "22/05/1982"
},
{
id: 4,
name: "Brendon Philips",
age: "35",
qty: "2",
dob: "01/08/1980"
},
{
id: 5,
name: "Margret Marmajuke",
age: "16",
qty: "0",
dob: "31/01/1999"
},
{
id: 5,
name: "Marmajuke",
age: "17",
qty: "0",
dob: "31/01/1999"
},
{
id: 4,
name: "Philips",
age: "27",
qty: "0",
dob: "01/08/1980"
}
];
var table = new Tabulator("#example-table", {
height: 205,
data: tabledata,
layout: "fitColumns",
columns: [{
title: "Name",
field: "name",
width: 150
},
{
title: "Age",
field: "age",
bottomCalc: adultCalc
},
{
title: "Qty",
field: "qty"
},
{
title: "Date Of Birth",
field: "dob",
sorter: "date",
align: "center"
}
]
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://unpkg.com/tabulator-tables#4.1.4/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables#4.1.4/dist/js/tabulator.min.js"></script>
<div id="example-table"></div>
My formula is : age * qty push it into array and total it.
I'm success to get the value what i want and push it into array, but the problem is i can't sum the array with array reduce function.
I got this error
TypeError: reduce of empty array with no initial value
My problem just to get total sum of array.
Can someone tell me what's wrong with my code?
Thanks.

You need to provide initial value to reduce
console.log('total', tempvalue.reduce(getSum,0));
first time when you use reduce you have an empty array and which is causing reduce to produce an error. you can pass initial value and it should work as expected.
Note: If initialValue isn't provided, reduce() will execute the
callback function starting at index 1, skipping the first index. If
initialValue is provided, it will start at index 0.
$(document).ready(function() {
function getSum(total, num) {
return total + num;
}
var adultCalc = function(values, data, calcParams) {
var tempvalue = [];
data.forEach(function(data) {
var count = data.age * data.qty;
tempvalue.push(count);
});
console.log('array', tempvalue);
console.log('total', tempvalue.reduce(getSum,0));
/*return tempvalue;*/
}
var tabledata = [{
id: 1,
name: "Oli Bob",
age: "12",
qty: "1",
dob: ""
},
{
id: 3,
name: "Christine Lobowski",
age: "42",
qty: "1",
dob: "22/05/1982"
},
{
id: 4,
name: "Brendon Philips",
age: "35",
qty: "2",
dob: "01/08/1980"
},
{
id: 5,
name: "Margret Marmajuke",
age: "16",
qty: "0",
dob: "31/01/1999"
},
{
id: 5,
name: "Marmajuke",
age: "17",
qty: "0",
dob: "31/01/1999"
},
{
id: 4,
name: "Philips",
age: "27",
qty: "0",
dob: "01/08/1980"
}
];
var table = new Tabulator("#example-table", {
height: 205,
data: tabledata,
layout: "fitColumns",
columns: [{
title: "Name",
field: "name",
width: 150
},
{
title: "Age",
field: "age",
bottomCalc: adultCalc
},
{
title: "Qty",
field: "qty"
},
{
title: "Date Of Birth",
field: "dob",
sorter: "date",
align: "center"
}
]
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://unpkg.com/tabulator-tables#4.1.4/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables#4.1.4/dist/js/tabulator.min.js"></script>
<div id="example-table"></div>

It can be done even easier. And don't forget the second parameter (initial value) of Array.reduce method.
$(document).ready(function() {
function getSum(total, num) {
return total + num;
}
var adultCalc = function(values, data, calcParams) {
return data.map(function(d) {
return d.age * d.qty;
})
.reduce(getSum, 0);
}
//or even in ES6 style
const qtyCalc = (values, data, calcParams) =>
data.map(d => d.age * d.qty)
.reduce((t, n) => t + n * 2, 0);
var tabledata = [{
id: 1,
name: "Oli Bob",
age: "12",
qty: "1",
dob: ""
},
{
id: 3,
name: "Christine Lobowski",
age: "42",
qty: "1",
dob: "22/05/1982"
},
{
id: 4,
name: "Brendon Philips",
age: "35",
qty: "2",
dob: "01/08/1980"
},
{
id: 5,
name: "Margret Marmajuke",
age: "16",
qty: "0",
dob: "31/01/1999"
},
{
id: 5,
name: "Marmajuke",
age: "17",
qty: "0",
dob: "31/01/1999"
},
{
id: 4,
name: "Philips",
age: "27",
qty: "0",
dob: "01/08/1980"
}
];
var table = new Tabulator("#example-table", {
height: 205,
data: tabledata,
layout: "fitColumns",
columns: [{
title: "Name",
field: "name",
width: 150
},
{
title: "Age",
field: "age",
bottomCalc: adultCalc
},
{
title: "Qty",
field: "qty",
bottomCalc: qtyCalc
},
{
title: "Date Of Birth",
field: "dob",
sorter: "date",
align: "center"
}
]
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://unpkg.com/tabulator-tables#4.1.4/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables#4.1.4/dist/js/tabulator.min.js"></script>
<div id="example-table"></div>