Develop Reference

finding common key in array of objects in javascript

let array = [
{ en: "", ar: "", sp: "", fr: "" },
{ en: "", ar: "", sp: "", gu: "" },
{ en: "", ar: "", sp: "", hi: "" },
{ en: "", ar: "", sp: "", la: "" },
{ en: "", ar: "", sp: "" },
];
I have this array of objects and want to find the common key from all objects
the final output should be like
let array2 =[ "en", "ar", "sp"]
so the filter should only return the key's which are available in every objects. I am not able to find the best algorithm for this sorting. A little guidance will also be very helpful.

const array = [
{ en: "", ar: "", sp: "", fr: "" },
{ en: "", ar: "", sp: "", gu: "" },
{ en: "", ar: "", sp: "", hi: "" },
{ en: "", ar: "", sp: "", la: "" },
{ en: "", ar: "", sp: "" }]
const allKeys = [...new Set(array.flatMap(i=>Object.keys(i)))]
const commonKeys = allKeys.filter(i=>!array.some(j=>!Object.keys(j).includes(i)))
console.log(commonKeys)

let array = [
{ en: "", ar: "", sp: "", fr: "" },
{ en: "", ar: "", sp: "", gu: "" },
{ en: "", ar: "", sp: "", hi: "" },
{ en: "", ar: "", sp: "", la: "" },
{ en: "", ar: "", sp: "" },
];
let keysArr = array.map(x => Object.keys(x));
let commonKeys = keysArr.pop().reduce((res, x) => {
const isEvery = keysArr.every((i) => i.includes(x));
if (!res.includes(x) && isEvery) {
res.push(x);
}
return res;
}, []);
console.log(commonKeys);

Pretty easy to do with reduce, Object.keys, filter, and includes.
First pass in reduce you just store the keys of the object.
Each pass after that you are just looking for the keys that exist in the current row.
let array = [
{ en: "", ar: "", sp: "", fr: "" },
{ en: "", ar: "", sp: "", gu: "" },
{ en: "", ar: "", sp: "", hi: "" },
{ en: "", ar: "", sp: "", la: "" },
{ en: "", ar: "", sp: "" },
];
const commonKeys = array.reduce((commonKeys, item, index) => {
// get the keys
const itemKeys = Object.keys(item);
// if we are at first index, return the keys
// If we are > 1, filter only the keys that are in the object
return !index ? itemKeys : commonKeys.filter(key => itemKeys.includes(key));
}, []);
console.log(commonKeys);

Ensure a random javascript object selection isn't selected twice

I want to store the random selection of a function in an array so that in future runs of the random function the property that was previously picked will not be selected. For example, I want it so if England is selected at random then, future runs of this function will omit England.
Javascript Object
var countryDataObj = {
England: { Title: "England", imageUrl: "", Total: 70 },
Spain: { Title: "Spain", imageUrl: "", Total: 57 },
Wales: { Title: "Wales", imageUrl: "", Total: 52 },
Germany: { Title: "Germany", imageUrl: "", Total: 16 },
Ireland: { Title: "Ireland", imageUrl: "", Total: 14 },
Russia: { Title: "Russia", imageUrl: "", Total: 19 },
Portugal: { Title: "Portugal", imageUrl: "", Total: 32 },
Wales: { Title: "Wales", imageUrl: "", Total: 52 },
France: { Title: "France", imageUrl: "", Total: 49 }
}
The current randomize function
function returnCountry(obj) {
var keys = Object.keys(obj);
return obj[keys[ keys.length * Math.random() << 0]];
};

There are many ways to do this, one would be an object-oriented approach.
class CountryPicker {
countries = [
{ Title: "England", imageUrl: "", Total: 70 },
{ Title: "Spain", imageUrl: "", Total: 57 },
{ Title: "Wales", imageUrl: "", Total: 52 },
{ Title: "Germany", imageUrl: "", Total: 16 },
{ Title: "Ireland", imageUrl: "", Total: 14 },
{ Title: "Russia", imageUrl: "", Total: 19 },
{ Title: "Portugal", imageUrl: "", Total: 32 },
{ Title: "Wales", imageUrl: "", Total: 52 },
{ Title: "France", imageUrl: "", Total: 49 }
];
randomCountry() {
if (this.countries.length == 0) throw new Error("None left");
const index = Math.floor(Math.random() * this.countries.length);
const result = this.countries[index];
this.countries.splice(index, 1);
return result;
}
}
const picker = new CountryPicker();
console.log(picker.randomCountry());
Playground

Show nested array items react native

I have array of comments and their replies like this:
[
{
commentId: "5efd85d5b2eff7063b8ec802",
description: "some comment description",
isAnonymous: false,
createdAt: "2020-07-02T06:59:33.317Z",
currentUserLiked: 0,
likes: 0,
user: {
firstName: "ar",
lastName: "ar",
email: "test#email.com",
username: "sami",
isVerified: false,
},
children: [
{
commentId: "5efd86b7b2eff7063b8ec803",
parentId: "5efd85d5b2eff7063b8ec802",
description: "some comment description",
isAnonymous: false,
createdAt: "2020-07-02T07:03:19.405Z",
currentUserLiked: 0,
likes: 0,
user: {
firstName: "ar",
lastName: "ar",
email: "test#email.com",
username: "sami",
isVerified: false,
},
children: [
{
commentId: "5efd89c4b2eff7063b8ec805",
parentId: "5efd86b7b2eff7063b8ec803",
description: "Child of Child",
isAnonymous: false,
createdAt: "2020-07-02T07:16:20.717Z",
currentUserLiked: 0,
likes: 0,
user: {
firstName: "ar",
lastName: "ar",
email: "test#email.com",
username: "sami",
isVerified: false,
},
children: [],
},
],
},
{
commentId: "5efd8996b2eff7063b8ec804",
parentId: "5efd85d5b2eff7063b8ec802",
description: "Child of Child",
isAnonymous: false,
createdAt: "2020-07-02T07:15:34.341Z",
currentUserLiked: 0,
likes: 0,
user: {
firstName: "ar",
lastName: "ar",
email: "test#email.com",
username: "sami",
isVerified: false,
},
children: [],
},
],
},
];
and I want to show them as all children in same level in react native using flatList.
How can I do this?

Do I understand correctly?:
const comments = [{id: 1, children: [{id: 2, children: [{id: 3, children:[]}]}]}];
const flatComments = (list) => {
return list.flatMap(el => {
const {children, ...out} = el;
return [out, ...flatComments(children)];
});
};
flatComments(comments);
// [{id: 1}, {id: 2}, {id: 3}];

Warning: Cannot reinitialise Datatable issue

Am using Jquery Datatable to render table.
By default the page wont display any table and there's a search box on the page, on entering a value it will make a call to database and render the datatable according to the response from database.
So now once the datatable is rendered, if I enter a new value in search box and call the datatable to be rendered it gives me above error.
I tried bdestroy and redrawing table but nothing seems to work for me.
$(document).ready(function() {
var resultArray = [
["290013", "TEST OF ENSEMBLE", "11-25-2016", "", "", "22001204", "TEST EP PRODUCT FOR DEVELOPMENT", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["290015", "XXX5", "10-19-2016", "test", "$33.00", "22001204", "TEST EP PRODUCT FOR DEVELOPMENT", "2002", "XXX5", "XXX5", "XXX5", "", "1864", "2017", "VERSION", "23004746", "XXX5", "", "One Time", "", "", "", "", "", "", "21004482", "9189", "Feature Set", "20003880", "XXX5", "XXX5", "BASE", "19-APR-2017", "04-18-2017", "3877", "", ""],
["290015", "XXX5", "10-19-2016", "test", "$33.00", "22001204", "TEST EP PRODUCT FOR DEVELOPMENT", "", "", "", "", "", "1865", "Deluxe", "EDITION", "", "", "", "", "", "", "", "", "", "", "", "9190", "Charge", "", "", "", "", "", "", "", "", ""]
];
console.log(JSON.stringify(resultArray));
var table = $('#example').DataTable({
columns: [{
title: 'Item Master Number',
name: 'ItemMasterNumber'
}, {
title: 'Description',
name: 'Description'
}, {
title: 'First Processing Date',
name: 'FirstProcessingDate'
}, {
title: 'Alias',
name: 'Alias'
}, {
title: 'Master Price',
name: 'MasterPrice'
}, {
title: 'Product Id',
name: 'ProductId'
}, {
title: 'Product Description',
name: 'ProductDescription'
}, {
title: 'Feature Set#',
name: 'FeatureSetId'
}, {
title: 'Feature Set Code',
name: 'FeatureSetCode'
}, {
title: 'Feature Set Name',
name: 'FeatureSetName'
}, {
title: 'Feature Set Description',
name: 'Feature Set Description'
}, {
title: 'Enablement Type',
name: 'Enablement Type'
}, {
title: 'Feature Id',
name: 'FeatureId'
}, {
title: 'Attribute Name',
name: 'AttributeName'
}, {
title: 'Attribute Value',
name: 'AttributeValue'
}],
data: resultArray,
rowsGroup: [
// Always the array (!) of the column-selectors in specified
// order to which rows groupping is applied.
// (column-selector could be any of specified in:
// https://datatables.net/reference/type/column-selector)
'ItemMasterNumber:name', 'Description:name', 'FirstProcessingDate:name', 'Alias:name', 'MasterPrice:name',
'ProductId:name',
'ProductDescription:name',
'FeatureSetId:name',
'FeatureSetCode:name'
],
pageLength: '20',
});
});
I am calling above code each time the value is entered in the search box and clicked on a button besides it.
All I want is to display the new data on the Datatable.
How can I resolve this error.

Here's a JSFiddle/snippet I threw together real quick, please let me know if this helps: https://jsfiddle.net/p9pot11h/5/
var dataTable_ = null;
var resultArray = [
["290013", "TEST OF ENSEMBLE", "11-25-2016", "", "", "22001204", "TEST EP PRODUCT FOR DEVELOPMENT", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
["290015", "XXX5", "10-19-2016", "test", "$33.00", "22001204", "TEST EP PRODUCT FOR DEVELOPMENT", "2002", "XXX5", "XXX5", "XXX5", "", "1864", "2017", "VERSION", "23004746", "XXX5", "", "One Time", "", "", "", "", "", "", "21004482", "9189", "Feature Set", "20003880", "XXX5", "XXX5", "BASE", "19-APR-2017", "04-18-2017", "3877", "", ""],
["290015", "XXX5", "10-19-2016", "test", "$33.00", "22001204", "TEST EP PRODUCT FOR DEVELOPMENT", "", "", "", "", "", "1865", "Deluxe", "EDITION", "", "", "", "", "", "", "", "", "", "", "", "9190", "Charge", "", "", "", "", "", "", "", "", ""]
];
var resultArray2 = [
["290013", "TEST OF ENSEMBLE", "11-25-2016", "", "", "22001204", "TEST EP PRODUCT FOR DEVELOPMENT", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""]
];
$(document).ready(function() {
//console.log(JSON.stringify(resultArray));
dataTable_ = $('#example').DataTable({
columns: [{
title: 'Item Master Number',
name: 'ItemMasterNumber'
}, {
title: 'Description',
name: 'Description'
}, {
title: 'First Processing Date',
name: 'FirstProcessingDate'
}, {
title: 'Alias',
name: 'Alias'
}, {
title: 'Master Price',
name: 'MasterPrice'
}, {
title: 'Product Id',
name: 'ProductId'
}, {
title: 'Product Description',
name: 'ProductDescription'
}, {
title: 'Feature Set#',
name: 'FeatureSetId'
}, {
title: 'Feature Set Code',
name: 'FeatureSetCode'
}, {
title: 'Feature Set Name',
name: 'FeatureSetName'
}, {
title: 'Feature Set Description',
name: 'Feature Set Description'
}, {
title: 'Enablement Type',
name: 'Enablement Type'
}, {
title: 'Feature Id',
name: 'FeatureId'
}, {
title: 'Attribute Name',
name: 'AttributeName'
}, {
title: 'Attribute Value',
name: 'AttributeValue'
}],
data: resultArray,
rowsGroup: [
// Always the array (!) of the column-selectors in specified
// order to which rows groupping is applied.
// (column-selector could be any of specified in:
// https://datatables.net/reference/type/column-selector)
'ItemMasterNumber:name', 'Description:name', 'FirstProcessingDate:name', 'Alias:name', 'MasterPrice:name',
'ProductId:name',
'ProductDescription:name',
'FeatureSetId:name',
'FeatureSetCode:name'
],
pageLength: '20',
});
$('#search-button').on('click', function() {
var data = resultArray2;
var dataToSearch = $('#search').val();
if (dataToSearch == '') {
data = [];
}
// AJAX CALL TO GET RESULTS HERE
// SUCCESS FUNCTION TO CALL INSIDE AJAX SUCCESS
rePopulateTable(data);
});
});
var rePopulateTable = function(data) {
dataTable_.clear();
dataTable_.rows.add(data);
dataTable_.draw();
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet" />
<body>
<input type="search" id="search" placeholder="Search" />
<input type="button" id="search-button" value="Search DB" />
<br/>
<br/>
<br/>
<table id="example">
</table>
</body>

Filter objects array with keys array [inverse]

I have this following keys array:
var keys = [{userId: "333"}, {userId: "334"}]
And this objects array:
var users = [
{id: "333", firstName: "", lastName: "", idCard: "", birthDate: ""},
{id: "334", firstName: "", lastName: "", idCard: "", birthDate: ""},
{id: "335", firstName: "", lastName: "", idCard: "", birthDate: ""},
{id: "336", firstName: "", lastName: "", idCard: "", birthDate: ""}
]
I need to change my users Array by filter it with my keys Array[inverse result].
Cant figure it out, get all the answers! (js, jquery, angular)
Anyone?

You can use filter() and find().
var users = [
{id: "333", firstName: "", lastName: "", idCard: "", birthDate: ""},
{id: "334", firstName: "", lastName: "", idCard: "", birthDate: ""},
{id: "335", firstName: "", lastName: "", idCard: "", birthDate: ""},
{id: "336", firstName: "", lastName: "", idCard: "", birthDate: ""}
]
var keys = [{userId: "333"}, {userId: "334"}]
var result = users.filter(function(o) {
return !keys.find(function(e) {
return e.userId == o.id
})
})
console.log(result)

You can have an array of ids and then you can just check for availability in this list
var users = [
{id: "333", firstName: "", lastName: "", idCard: "", birthDate: ""},
{id: "334", firstName: "", lastName: "", idCard: "", birthDate: ""},
{id: "335", firstName: "", lastName: "", idCard: "", birthDate: ""},
{id: "336", firstName: "", lastName: "", idCard: "", birthDate: ""}
]
var keys = [{userId: "333"}, {userId: "334"}]
var idList = keys.map(function(x){ return x.userId});
var r = users.filter(function(x){
return idList.indexOf(x.id) < 0
})
console.log(r)

You could use a hash table for filtering.
var keys = [{ userId: "333" }, { userId: "334" }],
users = [{ id: "333", firstName: "", lastName: "", idCard: "", birthDate: "" }, { id: "334", firstName: "", lastName: "", idCard: "", birthDate: "" }, { id: "335", firstName: "", lastName: "", idCard: "", birthDate: "" }, { id: "336", firstName: "", lastName: "", idCard: "", birthDate: "" }],
filtered = users.filter(function (a) {
return !this[a.id];
}, keys.reduce(function (r, a) {
r[a.userId] = true;
return r;
}, Object.create(null)));
console.log(filtered);
.as-console-wrapper { max-height: 100% !important; top: 0; }