I'm getting some nested data, that I need to filter out and I just can't wrap my head around all those loops. I would be very glad for a help.
Data I get:
const data = [
{
categories: [{ name: "street" }, { name: "portrait" }],
photo: { childImageSharp: { fluid: "values" } },
},
{
categories: [{ name: "street" }],
photo: { childImageSharp: { fluid: "values" } },
},
{
categories: [{ name: "portrait" }],
photo: { childImageSharp: { fluid: "values" } },
},
{
categories: [{ name: "street" }, { name: "architecture" }],
photo: { childImageSharp: { fluid: "values" } },
},
{
categories: [{ name: "architecture" }],
photo: { childImageSharp: { fluid: "values" } },
},
{
categories: [{ name: "street" }],
photo: { childImageSharp: { fluid: "values" } },
},
];
List of photos, each photo has a photo object with source that I ll use to render element and also categories array of objects that contains an name with string value.
And I want to filter out only photos that contains category name "portrait". So I need to create an new array that is filtered with only these results that match my criteria.
What I've tried:
const filtered = data.map((photo) => photo.categories.filter((category) => category.name.includes("portrait")));
What I got:
const result = [
[{name: "portrait"}],
[],
[{name: "portrait"}],
[],
[],
[]
]
What I'd like to get:
const result = [
{
categories: [{ name: "street" }, { name: "portrait" }],
photo: { childImageSharp: { fluid: "values" } },
},
{
categories: [{ name: "portrait" }],
photo: { childImageSharp: { fluid: "values" } },
}
]
Dont use map just use filter
const data = [
{
categories: [{ name: "street" }, { name: "portrait" }],
photo: { childImageSharp: { fluid: "values" } },
},
{
categories: [{ name: "street" }],
photo: { childImageSharp: { fluid: "values" } },
},
{
categories: [{ name: "portrait" }],
photo: { childImageSharp: { fluid: "values" } },
},
{
categories: [{ name: "street" }, { name: "architecture" }],
photo: { childImageSharp: { fluid: "values" } },
},
{
categories: [{ name: "architecture" }],
photo: { childImageSharp: { fluid: "values" } },
},
{
categories: [{ name: "street" }],
photo: { childImageSharp: { fluid: "values" } },
},
];
const result = data.filter( x => x.categories.some(c => c.name == "portrait"));
console.log(result);
Related
I am trying through the array and use a Array.prototype.filter() method on every children array to find the elements whose key matches with the ones specified.
Then, I'am using Array.prototype.splice() to remove the results from the respective children array but the result is return undefined.
const inputArray = [
"Oxygen-a3b8be32-c36e-a02e-37f4-a35239e0cedb",
"633ac872e78fa7ebee03b8bf",
"5e69dbd7-5fee-67a9-c73f-4656f9b90715",
"d484558b-4717-b0b8-db07-68288afb4f6a",
"63922aac4ff08f52d71fa891",
"33a3182b-93a4-84b9-4c49-c955a8416197",
];
const originalArray = [{
title: "Animals",
key: "d484558b-4717-b0b8-db07-68288afb4f6a",
children: [{
title: "Color",
key: "63922aac4ff08f52d71fa891",
children: [{
title: "Black",
key: "Black-9e994ed2-823b-d1d6-4613-91d43f570fec",
},
{
title: "White",
key: "White-5d0b102a-2555-8f7c-d471-cc82a5bd9c01",
},
],
}, ],
},
{
title: "Elements",
key: "5e69dbd7-5fee-67a9-c73f-4656f9b90715",
children: [{
title: "Non metals",
key: "633ac872e78fa7ebee03b8bf",
children: [{
title: "Carbon",
key: "Carbon-e443daa4-def4-9830-796e-ee8c5a1f41d4",
},
{
title: "Nitrogen",
key: "Nitrogen-c2922569-0b2d-0e07-454d-d8411af701b7",
},
{
title: "Oxygen",
key: "Oxygen-a3b8be32-c36e-a02e-37f4-a35239e0cedb",
},
],
}, ],
},
{
title: "Planets",
key: "33a3182b-93a4-84b9-4c49-c955a8416197",
children: [{
title: "Composition",
key: "63b3d5cd12c06ba7ce353f76",
children: [{
title: "Chthonian planet",
key: "Chthonian planet-b3c593c1-d29e-5e14-1b11-2241e8ef2be6",
},
{
title: "Carbon planet",
key: "Carbon planet-07d67d62-afcf-fbcf-a8e8-75081cb44c2f",
},
],
}, ],
},
];
console.log(
"🚀 ~ file: TranferTree.misc.js:152 ~ onCheck ~ outputArray",
originalArray.forEach(e => {
e.children.forEach((c, i) => {
if (inputArray.includes(c.key)) {
e.children.splice(i, 1);
} else {
c.children.forEach((cc, j) => {
if (inputArray.includes(cc.key)) {
c.children.splice(j, 1);
}
});
}
});
})
);
Note: For example in the Elements => 5e69dbd7-5fee-67a9-c73f-4656f9b90715 children Non metals => 633ac872e78fa7ebee03b8bf i am only remove object with this key => Oxygen-a3b8be32-c36e-a02e-37f4-a35239e0cedb I want to keep the other objects that were not found this also applies to for example Composition => 63b3d5cd12c06ba7ce353f76 or Planets => 33a3182b-93a4-84b9-4c49-c955a8416197.
Since you want to preserve the original object references it will be slightly less efficient, but here's a way you can do it with recursive function calls. It provides the same output as your code, but it's correctly logging the final structure whereas yours is logging the return value of .forEach() which is undefined, by design.
const inputArray = [
"Oxygen-a3b8be32-c36e-a02e-37f4-a35239e0cedb",
"633ac872e78fa7ebee03b8bf",
"5e69dbd7-5fee-67a9-c73f-4656f9b90715",
"d484558b-4717-b0b8-db07-68288afb4f6a",
"63922aac4ff08f52d71fa891",
"33a3182b-93a4-84b9-4c49-c955a8416197",
];
const originalArray = [{
title: "Animals",
key: "d484558b-4717-b0b8-db07-68288afb4f6a",
children: [{
title: "Color",
key: "63922aac4ff08f52d71fa891",
children: [{
title: "Black",
key: "Black-9e994ed2-823b-d1d6-4613-91d43f570fec",
},
{
title: "White",
key: "White-5d0b102a-2555-8f7c-d471-cc82a5bd9c01",
},
],
}, ],
},
{
title: "Elements",
key: "5e69dbd7-5fee-67a9-c73f-4656f9b90715",
children: [{
title: "Non metals",
key: "633ac872e78fa7ebee03b8bf",
children: [{
title: "Carbon",
key: "Carbon-e443daa4-def4-9830-796e-ee8c5a1f41d4",
},
{
title: "Nitrogen",
key: "Nitrogen-c2922569-0b2d-0e07-454d-d8411af701b7",
},
{
title: "Oxygen",
key: "Oxygen-a3b8be32-c36e-a02e-37f4-a35239e0cedb",
},
],
}, ],
},
{
title: "Planets",
key: "33a3182b-93a4-84b9-4c49-c955a8416197",
children: [{
title: "Composition",
key: "63b3d5cd12c06ba7ce353f76",
children: [{
title: "Chthonian planet",
key: "Chthonian planet-b3c593c1-d29e-5e14-1b11-2241e8ef2be6",
},
{
title: "Carbon planet",
key: "Carbon planet-07d67d62-afcf-fbcf-a8e8-75081cb44c2f",
},
],
}, ],
},
];
function filterChildrenById (item, ids) {
if (item.children) {
for (let i = 0; i < item.children.length; i++) {
let child = item.children[i];
if (ids.includes(child.key)) {
item.children.splice(i, 1);
// Reduce index because we removed an item so indexing will
// be off if we don't do this
i--;
} else if (Array.isArray(child.children)) {
child = filterChildrenById(child, ids);
}
}
}
return item;
}
function filterData(data, ids) {
data.forEach(item => filterChildrenById(item, ids))
return data;
}
console.log(
"🚀 ~ file: TranferTree.misc.js:152 ~ onCheck ~ outputArray",
filterData(originalArray, inputArray)
);
You need to iterate from the end of the array, because splice changes index for the followind item.
const
keys = ["Oxygen-a3b8be32-c36e-a02e-37f4-a35239e0cedb", "633ac872e78fa7ebee03b8bf", "5e69dbd7-5fee-67a9-c73f-4656f9b90715", "d484558b-4717-b0b8-db07-68288afb4f6a", "63922aac4ff08f52d71fa891", "33a3182b-93a4-84b9-4c49-c955a8416197"],
data = [{ title: "Animals", key: "d484558b-4717-b0b8-db07-68288afb4f6a", children: [{ title: "Color", key: "63922aac4ff08f52d71fa891", children: [{ title: "Black", key: "Black-9e994ed2-823b-d1d6-4613-91d43f570fec" }, { title: "White", key: "White-5d0b102a-2555-8f7c-d471-cc82a5bd9c01" }] }] }, { title: "Elements", key: "5e69dbd7-5fee-67a9-c73f-4656f9b90715", children: [{ title: "Non metals", key: "633ac872e78fa7ebee03b8bf", children: [{ title: "Carbon", key: "Carbon-e443daa4-def4-9830-796e-ee8c5a1f41d4" }, { title: "Nitrogen", key: "Nitrogen-c2922569-0b2d-0e07-454d-d8411af701b7" }, { title: "Oxygen", key: "Oxygen-a3b8be32-c36e-a02e-37f4-a35239e0cedb" }] }] }, { title: "Planets", key: "33a3182b-93a4-84b9-4c49-c955a8416197", children: [{ title: "Composition", key: "63b3d5cd12c06ba7ce353f76", children: [{ title: "Chthonian planet", key: "Chthonian planet-b3c593c1-d29e-5e14-1b11-2241e8ef2be6" }, { title: "Carbon planet", key: "Carbon planet-07d67d62-afcf-fbcf-a8e8-75081cb44c2f" }] }] }],
remove = keys => {
const fn = array => {
let i = array.length;
while (i--) {
if (keys.includes(array[i].key)) array.splice(i, 1);
else if (array[i].children) fn(array[i].children);
}
};
return fn;
};
remove(keys)(data);
console.log(data);
.as-console-wrapper { max-height: 100% !important; top: 0; }
Suppose we have following file dataset\test.js
var dataset={
HK_NetMovement_Censtad: {
name: 'HK_NetMovement_Censtad',
keys: [],
columns: [{
id: "dateiso",
name: {
en: "Mid_yr"
},
type: "datetime"
},
{
id: "value",
name: {
en: "Pop_size"
},
type: "numeric"
}
],
fearueServer: 'HK_KEY_VALUE'
},
HK_CPIchangeseason_Censtad: {
fearueServer: 'HK_KEY_VALUE',
columns: [{
id: "dateiso",
name: {
en: "Month"
},
type: "datetime"
},
{
id: "value",
name: {
en: "Monthly Rate"
},
type: "numeric"
}
],
keys: [],
name: 'HK_CPIchangeseason_Censtad'
}
}
I want to read it as an Object in Nodejs. One way is to read it using eval function as follows:
fs.readFile(filepath, 'utf8', function (err, data) {
eval(data)
console.log(dataset)
})
that works fine. But eval function has security holes. Is there any other workarounds to avoid using eval?
Thanks
If I convert those files to the following format
module.exports = function () {
this.dataset = {
HK_NetMovement_Censtad: {
name: 'HK_NetMovement_Censtad',
keys: [],
columns: [{
id: "dateiso",
name: {
en: "Mid_yr"
},
type: "datetime"
},
{
id: "value",
name: {
en: "Pop_size"
},
type: "numeric"
}
],
fearueServer: 'HK_KEY_VALUE'
},
HK_CPIchangeseason_Censtad: {
fearueServer: 'HK_KEY_VALUE',
columns: [{
id: "dateiso",
name: {
en: "Month"
},
type: "datetime"
},
{
id: "value",
name: {
en: "Monthly Rate"
},
type: "numeric"
}
],
keys: [],
name: 'HK_CPIchangeseason_Censtad'
}
}
I can use
var j = require('./datasets/'+file)
to import them into my file and work with them
I have two arrays details and options that coming from different sources (web api requests)
details: [
{ id: 'groups', option: true },
{ id: 'category', option: false }
]
options: {
groups: [
{ id: 'g1' },
{ id: 'g2' }
],
category: [
{ id: 'c1' },
{ id: 'c2' }
],
other: [
{ id: 'o1' },
{ id: 'o2' }
],
}
I want to combine these tow arrays like
combined: [
groups:
{
options:[
{ id: 'g1' },
{ id: 'g2' }
],
details: { option: true}
},
category:
{
options: [
{ id: 'c1' },
{ id: 'c2' }
],
details: { option: false}
},
]
Basically if any id from details is matching to options property it should go in to new array under the same property name and all details except id goes to related details property.
What is the best way of doing that? Is lodash can handle that ?
If you only want the items in both options and details (intersection):
var details = [
{ id: 'groups', option: true },
{ id: 'category', option: false }
]
var options = {
groups: [
{ id: 'g1' },
{ id: 'g2' }
],
category: [
{ id: 'c1' },
{ id: 'c2' }
],
other: [
{ id: 'o1' },
{ id: 'o2' }
]
}
var combined = {};
details.forEach(({id: id, option: option}) => {
if (options[id]) {
combined[id] = combined[id] || {};
combined[id].options = options[id];
combined[id].details = {option: option};
}
})
console.log(JSON.stringify(combined, null, "\t"))
/*
{
"groups": {
"options": [
{
"id": "g1"
},
{
"id": "g2"
}
],
"details": {
"option": true
}
},
"category": {
"options": [
{
"id": "c1"
},
{
"id": "c2"
}
],
"details": {
"option": false
}
}
}
*/
If you want to retain all items from options and details whether or not they match (union):
var details = [
{ id: 'groups', option: true },
{ id: 'category', option: false }
]
var options = {
groups: [
{ id: 'g1' },
{ id: 'g2' }
],
category: [
{ id: 'c1' },
{ id: 'c2' }
],
other: [
{ id: 'o1' },
{ id: 'o2' }
]
}
var combined = {};
Object.keys(options).forEach(id => {
combined[id] = {};
combined[id].options = options[id];
})
details.forEach(({id: id, option: option}) => {
combined[id] = combined[id] || {};
combined[id].details = {option: option};
})
console.log(JSON.stringify(combined, null, "\t"))
/*
{
"groups": {
"options": [
{
"id": "g1"
},
{
"id": "g2"
}
],
"details": {
"option": true
}
},
"category": {
"options": [
{
"id": "c1"
},
{
"id": "c2"
}
],
"details": {
"option": false
}
},
"other": {
"options": [
{
"id": "o1"
},
{
"id": "o2"
}
]
}
}
*/
You need to use [] notation to push details values.
options['groups']['details'] = true
options['groups']['category'] = false
Here's the solution for your problem
var details= [
{ id: 'groups', option: true },
{ id: 'category', option: false }
];
var options= {
groups: [
{ id: 'g1' },
{ id: 'g2' }
],
category: [
{ id: 'c1' },
{ id: 'c2' }
],
other: [
{ id: 'o1' },
{ id: 'o2' }
],
};
var combined = {};
for (var i= 0;i<details.length;i++){
var obj = {}
obj.options=options[details[i].id];
obj.details = {};
obj.details.option=details[i].option;
combined[details[i].id] = obj;
}
console.log(combined)
I have the following object array:
var sizeList = [
{ id: 1, title:"Test1",
type:[{name:"Big", present:false}, {name:"Small", present:true}, {name:"Medium", present:false}]
},
{ id: 2,title:"Test2",
type:[{name:"Big", present:false}, {name:"Small", present:true}, {name:"Medium", present:false}]
},
{ id: 3,title:"Test3",
type:[{name:"Big", present:false}, {name:"Small", present:true}, {name:"Medium", present:true}]
}
]
I want to filter this list where Medium is True. I currently have this set up.
var specificSizes = _.filter(sizeList.type, { 'name': 'Medium', 'present': true })
This keeps returning an empty array. I also tried this:
specificSizes = _.filter(sizeList.type, function (type) {
return _.some(type, {'name': 'Medium', 'present':true})
});
With lodash, you could wrap the condition in the same structure for the test, as the original object.
_.filter(sizeList, { type: [{ name: 'Medium', present: true }] })
var sizeList = [{ id: 1, title: "Test1", type: [{ name: "Big", present: false }, { name: "Small", present: true }, { name: "Medium", present: false }] }, { id: 2, title: "Test2", type: [{ name: "Big", present: false }, { name: "Small", present: true }, { name: "Medium", present: false }] }, { id: 3, title: "Test3", type: [{ name: "Big", present: false }, { name: "Small", present: true }, { name: "Medium", present: true }] }],
result = _.filter(sizeList, { type: [{ name: 'Medium', present: true }] });
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>
In plain Javascript, you could use Array#filter for the outer array and check with Array#some if one condition met.
var sizeList = [{ id: 1, title: "Test1", type: [{ name: "Big", present: false }, { name: "Small", present: true }, { name: "Medium", present: false }] }, { id: 2, title: "Test2", type: [{ name: "Big", present: false }, { name: "Small", present: true }, { name: "Medium", present: false }] }, { id: 3, title: "Test3", type: [{ name: "Big", present: false }, { name: "Small", present: true }, { name: "Medium", present: true }] }],
result = sizeList.filter(function (a) {
return a.type.some(function (b) {
return b.name === 'Medium' && b.present;
});
});
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }
I have 2 types of a objects, a group, and an item. A group can have children which is either an array of groups or an array of items.
I've ended up with a series of nested groups (which can be infinite levels deep) and I need to retrieve all the items, no matter how many levels deep, with only a group to work with.
Is there a way to retrieve all the items from the top-level group in the following data structure?
{
type: 'group',
children: [
{
type: 'group',
children: [
{
type: 'group',
children: [{type:'item'}, {type:'item'}, {type:'item'}]
},
{
type: 'group',
children: [{type:'item'}, {type:'item'}, {type:'item'}]
},
{
type: 'group',
children: [{type:'item'}, {type:'item'}, {type:'item'}]
},
]
},
{
type: 'group',
children: [
{
type: 'group',
children: [{type:'item'}]
},
{
type: 'group',
children: [{type:'item'}]
},
{
type: 'group',
children: [{type:'item'}]
},
]
},
{
type: 'group',
children: [
{
type: 'group',
children: [{type:'item'}, {type:'item'}]
},
{
type: 'group',
children: [{type:'item'}, {type:'item'}]
},
{
type: 'group',
children: [{type:'item'}, {type:'item'}]
},
]
},
]
}
You could use an iterative with Array#reduce and recursive with calling iter again, approach.
var data = { children: [{ children: [{ children: [{ name: 'item1' }, { name: 'item2' }, { name: 'item3' }] }, { children: [{ name: 'item1' }, { name: 'item2' }, { name: 'item3' }] }, { children: [{ name: 'item1' }, { name: 'item2' }, { name: 'item3' }] }] }, { children: [{ children: [{ name: 'item1' }] }, { children: [{ name: 'item1' }] }, { children: [{ name: 'item1' }] }] }, { children: [{ children: [{ name: 'item1' }, { name: 'item2' }, { name: 'item3' }] }, { children: [{ name: 'item1' }, { name: 'item2' }, { name: 'item3' }] }, { children: [{ name: 'item1' }, { name: 'item2' }, { name: 'item3' }] }] }] },
children = [data].reduce(function iter(r, a) {
if (Array.isArray(a.children)) {
return a.children.reduce(iter, r);
}
r.push(a);
return r;
}, []);
console.log(children);
.as-console-wrapper { max-height: 100% !important; top: 0; }
You can achieve it with recursion.
var data = {
children: [
{
children: [
{
children: [{ name: 'item1' }, { name: 'item2' }, { name: 'item3' }]
},
{
children: [{ name: 'item1' }, { name: 'item2' }, { name: 'item3' }]
},
{
children: [{ name: 'item1' }, { name: 'item2' }, { name: 'item3' }]
}
]
},
{
children: [
{
children: [{ name: 'item1' }]
},
{
children: [{ name: 'item1' }]
},
{
children: [{ name: 'item1' }]
}
]
},
{
children: [
{
children: [{ name: 'item1' }, { name: 'item2' }, { name: 'item3' }]
},
{
children: [{ name: 'item1' }, { name: 'item2' }, { name: 'item3' }]
},
{
children: [{ name: 'item1' }, { name: 'item2' }, { name: 'item3' }]
}
]
}
]
};
function getAllChildren(group, children) {
children = children || [];
if(group && Array.isArray(group.children)) {
group.children.forEach(function(child) {
getAllChildren(child, children)
});
}
else {
children.push(group);
}
return children;
}
console.log(getAllChildren(data));