how to merge the keys in the array into a single key with using the seperator, if value is null dont take it
let keysToBeMerged = [['note', 'status', seperator: ' ,'], ['group', 'level', seperator: ' ()']];
let data = [
{
"fields": [
{
"key": "area",
"value": null
},
{
"key": "terminal",
"value": null
},
{
"key": "note",
"value": "Some key notes"
},
{
"key": "status",
"value": "Enabled"
},
{
"key": "group",
"value": "Medium"
},
{
"key": "level",
"value": null
}
],
"name": "test 1",
"number": "123456127890",
"id": "yqweyqweu213"
},
{
"fields": [
{
"key": "area",
"value": "Delhi"
},
{
"key": "terminal",
"value": null
},
{
"key": "note",
"value": "Some key orginal notes"
},
{
"key": "status",
"value": "Disabled"
},
{
"key": "group",
"value": "Medium"
},
{
"key": "level",
"value": "High"
}
],
"name": "test 2",
"number": "173276123612",
"id": "uqweyewueyyuqwe"
},
{
"fields": [
{
"key": "area",
"value": "Mumbai"
},
{
"key": "terminal",
"value": 1
},
{
"key": "note",
"value": "Some key orginal sample notes"
},
{
"key": "status",
"value": "Enabled"
},
{
"key": "group",
"value": "Low"
},
{
"key": "level",
"value": null
}
],
"name": "test 3",
"number": "128737812381723",
"id": "kasjdashdkaskjd"
}
]
i have a collection called keysToBeMerged, i need to find the key from the he fields collection and need to merge some keys into a single key with merged values with using the seperator.
tried with below snippet
data.map(o => {
let key = []
let value = []
o.fields.forEach(f => {
keysToBeMerged.forEach(kColl => {
if(kColl.includes(f.key)){
key.push(f.key)
value.push(f.value)
}
})
console.log(key.join(""))
console.log(value.join(""))
})
return o
})
the expectedResult is shown below. Any help appreciated
let expectedResult = [
{
"fields": [
{
"key": "area",
"value": null
},
{
"key": "terminal",
"value": null
},
{
"key": "note|status",
"value": "Some key notes, Enabled"
},
{
"key": "group|level",
"value": "Medium"
}
],
"name": "test 1",
"number": "123456127890",
"id": "yqweyqweu213"
},
{
"fields": [
{
"key": "area",
"value": "Delhi"
},
{
"key": "terminal",
"value": null
},
{
"key": "note|status",
"value": "Some key orginal notes, Disabled"
},
{
"key": "group|level",
"value": "Medium (High)"
},
],
"name": "test 2",
"number": "173276123612",
"id": "uqweyewueyyuqwe"
},
{
"fields": [
{
"key": "area",
"value": "Mumbai"
},
{
"key": "terminal",
"value": 1
},
{
"key": "note|status",
"value": "Some key orginal sample notes, Enabled"
},
{
"key": "group|level",
"value": "Low"
},
],
"name": "test 3",
"number": "128737812381723",
"id": "kasjdashdkaskjd"
}
]
Related
I am converting the object to tree node format using the below method
function getNodes(object) {
return Object
.entries(object)
.map(([key, value]) => value && typeof value === 'object' ?
{
value: key + value,
label: key,
children: getNodes(value)
} :
{
value: key + value,
label: key
}
);
}
The sample object is:
var object = {
"income-array": [{
"income": {
"id": "1234",
"currency": "dollar",
"details": {
"individual-income": [{
"name": "abcd",
"income": 100
}, {
"name": "xyz",
"income": 500
}]
}
}
}]
}
I am getting this result:
[{
"value": "income-array[object Object]",
"label": "income-array",
"children": [{
"value": "0[object Object]",
"label": "0",
"children": [{
"value": "income[object Object]",
"label": "income",
"children": [{
"value": "id1234",
"label": "id"
}, {
"value": "currencydollar",
"label": "currency"
}, {
"value": "details[object Object]",
"label": "details",
"children": [{
"value": "individual-income[object Object],[object Object]",
"label": "individual-income",
"children": [{
"value": "0[object Object]",
"label": "0",
"children": [{
"value": "nameabcd",
"label": "name"
}, {
"value": "income100",
"label": "income"
}]
}, {
"value": "1[object Object]",
"label": "1",
"children": [{
"value": "namexyz",
"label": "name"
}, {
"value": "income500",
"label": "income"
}]
}]
}]
}]
}]
}]
}]
I want to get the value property path from root to a particular node like the below. I am confused with how to append step by step path to value.
[{
"value": "income-array",
"label": "income-array",
"children": [{
"value": "['income-array'][0]",
"label": "0",
"children": [{
"value": "['income-array'][0]['income']",
"label": "income",
"children": [{
"value": "['income-array'][0]['income']['id']",
"label": "id"
}, {
"value": "['income-array'][0]['income']['currencydollar']",
"label": "currency"
}, {
"value": "['income-array'][0]['income']['details']",
"label": "details",
"children": [{
"value": "['income-array'][0]['income']['details']['individual-income']",
"label": "individual-income",
"children": [{
"value": "['income-array'][0]['income']['details']['individual-income'][0]",
"label": "0",
"children": [{
"value": "['income-array'][0]['income']['details']['individual-income'][0]['name']",
"label": "name"
}, {
"value": "['income-array'][0]['income']['details']['individual-income'][0]['income']",
"label": "income"
}]
}, {
"value": "['income-array'][0]['income']['details']['individual-income'][1]",
"label": "1",
"children": [{
"value": "['income-array'][0]['income']['details']['individual-income'][1]['name']",
"label": "name"
}, {
"value": "['income-array'][0]['income']['details']['individual-income'][1]['income']",
"label": "income"
}]
}]
}]
}]
}]
}]
}]
Can you please guide me how to resolve this? Thanks
The outer function needs to pass its own current absolute path (which is value in your code) to the inner function,
in order to let the inner function know the previous paths.
Notice the parentPath='' parameter and children: getNodes(value, currentPath) below
function getNodes(object, parentPath = "") {
return Object.entries(object).map(([key, value]) => {
const currentPath = parentPath + `[${key}]`;
return value && typeof value === "object"
? {
value: currentPath,
label: key,
children: getNodes(value, currentPath),
}
: {
value: currentPath,
label: key,
};
});
}
After that, run getNodes(object) in the browser and you will get a result like this.
[
{
"value": "[income-array]",
"label": "income-array",
"children": [
{
"value": "[income-array][0]",
"label": "0",
"children": [
{
"value": "[income-array][0][income]",
"label": "income",
"children": [
{
"value": "[income-array][0][income][id]",
"label": "id"
},
{
"value": "[income-array][0][income][currency]",
"label": "currency"
},
{
"value": "[income-array][0][income][details]",
"label": "details",
"children": [
{
"value": "[income-array][0][income][details][individual-income]",
"label": "individual-income",
"children": [
{
"value": "[income-array][0][income][details][individual-income][0]",
"label": "0",
"children": [
{
"value": "[income-array][0][income][details][individual-income][0][name]",
"label": "name"
},
{
"value": "[income-array][0][income][details][individual-income][0][income]",
"label": "income"
}
]
},
{
"value": "[income-array][0][income][details][individual-income][1]",
"label": "1",
"children": [
{
"value": "[income-array][0][income][details][individual-income][1][name]",
"label": "name"
},
{
"value": "[income-array][0][income][details][individual-income][1][income]",
"label": "income"
}
]
}
]
}
]
}
]
}
]
}
]
}
]
I am new to react. I created a checkbox tree with the react-checkbox-tree package. The problem is when I click on an item in the tree, it doesn't expand when it should.
What changes can I make to fix it
Thanks in advance...
Here sandbox link of the app : sandbox
Here is my JSON database :
[
{
"mailProcessingCenters": [
{
"value": "AEAUHA",
"name": "ABU DHABI"
},
{
"value": "AEDXBA",
"name": "DUBAI"
},
{
"value": "AEDXBB",
"name": "DUBAI RASID SEA-PORT"
},
{
"value": "AEDXBD",
"name": "DUBAI TRANSIT / HUB"
},
{
"value": "AEDXBE",
"name": "DUBAI - SOMALIA"
},
{
"value": "AUSYDK",
"name": "SYDNEY K (EMIRATES - DIRECT LINK)"
},
{
"value": "GBLONO",
"name": "LONDON"
},
{
"value": "SGSINO",
"name": "SINGAPORE"
},
{
"value": "SGSINQ",
"name": "SINGAPORE Q, UAE"
},
{
"value": "USCHIE",
"name": "CHICAGO E"
},
{
"value": "USJECU",
"name": "NEW JERSEY U EMIRATES POST"
}
],
"value": "J1CAEA",
"shortvalue": "AEA",
"label": "EmiratesPost"
},
{
"mailProcessingCenters": [
{
"value": "AFKBLA",
"name": "KABUL"
},
{
"value": "AFKBLC",
"name": "KABUL C"
},
{
"value": "AFKBLS",
"name": "KABUL EMS SHAHEEN POST"
}
],
"value": "J1CAFA",
"shortvalue": "AFA",
"label": "Afghan Post"
},
{
"mailProcessingCenters": [
{
"value": "AGANUA",
"name": "ST JOHNS, A, ANTIGUA AND BARBUDA"
},
{
"value": "AGANUB",
"name": "ST JOHNS, B, ANTIGUA AND BARBUDA"
},
{
"value": "AGANUC",
"name": "ST JOHNS, C, ANTIGUA AND BARBUDA"
}
],
"value": "J1CAGA",
"shortvalue": "AGA",
"label": "GPO Antigua"
},
{
"mailProcessingCenters": [],
"value": "J1CAIA",
"shortvalue": "AIA",
"label": "AnguillaPost"
},
{
"mailProcessingCenters": [
{
"value": "ALTIAA",
"name": "TIRANA ENTRANGER"
}
],
"value": "J1CALA",
"shortvalue": "ALA",
"label": "Albanian PT"
},
{
"mailProcessingCenters": [
{
"value": "AMEVNA",
"name": "YEREVAN"
},
{
"value": "AMEVNB",
"name": "YEREVAN PI-2"
},
{
"value": "AMEVNC",
"name": "YEREVAN PI-3"
},
{
"value": "AMEVND",
"name": "YEREVAN EMS"
}
],
"value": "J1CAMA",
"shortvalue": "AMA",
"label": "Haypost AM"
},
{
"mailProcessingCenters": [],
"value": "J1CANA",
"shortvalue": "ANA",
"label": "POST NA NV"
}
]
And here is my App.js :
class App extends React.Component {
state = {
checked: [],
expanded: [],
database: db
};
render() {
console.log(this.state);
return (
<div>
<div onClick={secildi}>
<CheckboxTree
nodes={this.state.database}
checked={this.state.checked}
expanded={this.state.expanded}
onCheck={checked => this.setState({ checked })}
onExpand={expanded => this.setState({ expanded })}
/>
</div>
<div />
</div>
);
}
}
You have to rename the mailProcessingCenters to children and as suggested by Nicolò Cozzani name should have to be renamed as label.
I can see in the react-checkbox-tree demo, they require the children array to make it a tree which gets expanded.
const nodes = [{
value: 'mars',
label: 'Mars',
children: [ //<--------this one
{ value: 'phobos', label: 'Phobos' }, // <----name should be renamed as label
{ value: 'deimos', label: 'Deimos' },
],
}];
Updated code sand box.
How can i merge the array of objects based on the key
let data = [
{
"fields": [
{
"key": "terminal",
"value": null
},
{
"key": "status",
"value": "Enabled"
},
{
"key": "area",
"value": null
},
{
"key": "note",
"value": "Some key notes"
},
{
"key": "group",
"value": "Medium"
},
{
"key": "level",
"value": null
}
],
"name": "test 1",
"number": "123456127890",
"id": "yqweyqweu213"
},
{
"fields": [
{
"key": "terminal",
"value": null
},
{
"key": "status",
"value": "Disabled"
},
{
"key": "area",
"value": "Delhi"
},
{
"key": "note",
"value": "Some key orginal notes"
},
{
"key": "group",
"value": "Medium"
},
{
"key": "level",
"value": "High"
}
],
"name": "test 2",
"number": "173276123612",
"id": "uqweyewueyyuqwe"
},
{
"fields": [
{
"key": "terminal",
"value": 1
},
{
"key": "status",
"value": "Enabled"
},
{
"key": "area",
"value": "Mumbai"
},
{
"key": "note",
"value": "Some key orginal sample notes"
},
{
"key": "group",
"value": "Low"
},
{
"key": "level",
"value": null
}
],
"name": "test 3",
"number": "128737812381723",
"id": "kasjdashdkaskjd"
}
]
const orderArr = [
"area",
"terminal",
"note",
"status",
"group",
"level"
]
Tried with the below snippet
data.forEach(o => {
let keys = []
o.fields.forEach(f => {
keys.push(f.key)
})
let sortedKeys = keys.sort(function(a, b) {
return orderOfFields.indexOf(a) - orderOfFields.indexOf(b);
})
let obj = {}
sortedKeys.forEach(s => {
obj[s] = // how to get the value
})
return obj
})
expectedResult is
let expectedData = [
{
"fields": [
{
"key": "area",
"value": null
},
{
"key": "terminal",
"value": null
},
{
"key": "note",
"value": "Some key notes"
},
{
"key": "status",
"value": "Enabled"
},
{
"key": "group",
"value": "Medium"
},
{
"key": "level",
"value": null
}
],
"name": "test 1",
"number": "123456127890",
"id": "yqweyqweu213"
},
{
"fields": [
{
"key": "area",
"value": "Delhi"
},
{
"key": "terminal",
"value": null
},
{
"key": "note",
"value": "Some key orginal notes"
},
{
"key": "status",
"value": "Disabled"
},
{
"key": "group",
"value": "Medium"
},
{
"key": "level",
"value": "High"
}
],
"name": "test 2",
"number": "173276123612",
"id": "uqweyewueyyuqwe"
},
{
"fields": [
{
"key": "area",
"value": "Mumbai"
},
{
"key": "terminal",
"value": 1
},
{
"key": "note",
"value": "Some key orginal sample notes"
},
{
"key": "status",
"value": "Enabled"
},
{
"key": "group",
"value": "Low"
},
{
"key": "level",
"value": null
}
],
"name": "test 3",
"number": "128737812381723",
"id": "kasjdashdkaskjd"
}
]
You don't have to get sortedKeys and then create an object. You could directly use indexOf inside sort's compareFunction. If a.key has a lower index in orderArrcomapred b.key, the subtraction will return -1 and a will be placed ahead of b.
const data=[{"fields":[{"key":"terminal","value":null},{"key":"status","value":"Enabled"},{"key":"area","value":null},{"key":"note","value":"Some key notes"},{"key":"group","value":"Medium"},{"key":"level","value":null}],"name":"test 1","number":"123456127890","id":"yqweyqweu213"},{"fields":[{"key":"terminal","value":null},{"key":"status","value":"Disabled"},{"key":"area","value":"Delhi"},{"key":"note","value":"Some key orginal notes"},{"key":"group","value":"Medium"},{"key":"level","value":"High"}],"name":"test 2","number":"173276123612","id":"uqweyewueyyuqwe"},{"fields":[{"key":"terminal","value":1},{"key":"status","value":"Enabled"},{"key":"area","value":"Mumbai"},{"key":"note","value":"Some key orginal sample notes"},{"key":"group","value":"Low"},{"key":"level","value":null}],"name":"test 3","number":"128737812381723","id":"kasjdashdkaskjd"}]
const orderArr=["area","terminal","note","status","group","level"]
data.forEach(o =>
o.fields.sort((a, b) => orderArr.indexOf(a.key) - orderArr.indexOf(b.key))
)
console.log(data)
If you want a new array without mutating the original arary, you could use map like this:
const data=[{"fields":[{"key":"terminal","value":null},{"key":"status","value":"Enabled"},{"key":"area","value":null},{"key":"note","value":"Some key notes"},{"key":"group","value":"Medium"},{"key":"level","value":null}],"name":"test 1","number":"123456127890","id":"yqweyqweu213"},{"fields":[{"key":"terminal","value":null},{"key":"status","value":"Disabled"},{"key":"area","value":"Delhi"},{"key":"note","value":"Some key orginal notes"},{"key":"group","value":"Medium"},{"key":"level","value":"High"}],"name":"test 2","number":"173276123612","id":"uqweyewueyyuqwe"},{"fields":[{"key":"terminal","value":1},{"key":"status","value":"Enabled"},{"key":"area","value":"Mumbai"},{"key":"note","value":"Some key orginal sample notes"},{"key":"group","value":"Low"},{"key":"level","value":null}],"name":"test 3","number":"128737812381723","id":"kasjdashdkaskjd"}]
const orderArr=["area","terminal","note","status","group","level"]
const output = data.map(o => ({
...o,
fields: [...o.fields].sort((a, b) => orderArr.indexOf(a.key) - orderArr.indexOf(b.key))
}))
console.log(output)
I have the following code snippet, where I want original array (filters) to be filtered and get unique filters array.
I think I tried all the methods possible and it (uniqueFilters array) is still same 11 member original array.
Whats wrong?
How can I ensure that this array is actually filtered down to just a few unique elements in it? (they all are coming from the same place and are the same)
UPDATE:
- the answer successfully resolved the issue in js code.
- in the actual app I had to also deal with typescript to use the suggested answer. So maybe will help someone:
let newUniqueFilters = Array.from(new Map(filters.map(f => [f._id, f] as [string, any])).values());
var filters = [{
"_id": "filter1",
"filterIndex": 1,
"filterLabel": "Blur",
"filterURL": "url(#filter1)",
"filterEffects": [{
"name": "feGaussianBlur",
"attributes": [{
"name": "stdDeviation",
"value": 5
}]
}]
}, {
"_id": "filter2",
"filterIndex": 2,
"filterLabel": "Shadow",
"filterURL": "url(#filter2)",
"filterEffects": [{
"name": "feOffset",
"attributes": [{
"name": "dx",
"value": 20
}, {
"name": "dy",
"value": 20
}, {
"name": "result",
"value": "offOut"
}, {
"name": "in",
"value": "SourceAlpha"
}]
}, {
"name": "feGaussianBlur",
"attributes": [{
"name": "stdDeviation",
"value": 7
}, {
"name": "in",
"value": "offOut"
}, {
"name": "result",
"value": "blurOut"
}]
}, {
"name": "feBlend",
"attributes": [{
"name": "mode",
"value": "normal"
}, {
"name": "in2",
"value": "blurOut"
}, {
"name": "in",
"value": "SourceGraphic"
}]
}]
}, {
"_id": "filter2",
"filterIndex": 2,
"filterLabel": "Shadow",
"filterURL": "url(#filter2)",
"filterEffects": [{
"name": "feOffset",
"attributes": [{
"name": "dx",
"value": 20
}, {
"name": "dy",
"value": 20
}, {
"name": "result",
"value": "offOut"
}, {
"name": "in",
"value": "SourceAlpha"
}]
}, {
"name": "feGaussianBlur",
"attributes": [{
"name": "stdDeviation",
"value": 7
}, {
"name": "in",
"value": "offOut"
}, {
"name": "result",
"value": "blurOut"
}]
}, {
"name": "feBlend",
"attributes": [{
"name": "mode",
"value": "normal"
}, {
"name": "in2",
"value": "blurOut"
}, {
"name": "in",
"value": "SourceGraphic"
}]
}]
}, {
"_id": "filter1",
"filterIndex": 1,
"filterLabel": "Blur",
"filterURL": "url(#filter1)",
"filterEffects": [{
"name": "feGaussianBlur",
"attributes": [{
"name": "stdDeviation",
"value": 5
}]
}]
}, {
"_id": "filter1",
"filterIndex": 1,
"filterLabel": "Blur",
"filterURL": "url(#filter1)",
"filterEffects": [{
"name": "feGaussianBlur",
"attributes": [{
"name": "stdDeviation",
"value": 5
}]
}]
}, {
"_id": "filter1",
"filterIndex": 1,
"filterLabel": "Blur",
"filterURL": "url(#filter1)",
"filterEffects": [{
"name": "feGaussianBlur",
"attributes": [{
"name": "stdDeviation",
"value": 5
}]
}]
}, {
"_id": "filter2",
"filterIndex": 2,
"filterLabel": "Shadow",
"filterURL": "url(#filter2)",
"filterEffects": [{
"name": "feOffset",
"attributes": [{
"name": "dx",
"value": 20
}, {
"name": "dy",
"value": 20
}, {
"name": "result",
"value": "offOut"
}, {
"name": "in",
"value": "SourceAlpha"
}]
}, {
"name": "feGaussianBlur",
"attributes": [{
"name": "stdDeviation",
"value": 7
}, {
"name": "in",
"value": "offOut"
}, {
"name": "result",
"value": "blurOut"
}]
}, {
"name": "feBlend",
"attributes": [{
"name": "mode",
"value": "normal"
}, {
"name": "in2",
"value": "blurOut"
}, {
"name": "in",
"value": "SourceGraphic"
}]
}]
}, {
"_id": "filter1",
"filterIndex": 1,
"filterLabel": "Blur",
"filterURL": "url(#filter1)",
"filterEffects": [{
"name": "feGaussianBlur",
"attributes": [{
"name": "stdDeviation",
"value": 5
}]
}]
}, {
"_id": "filter2",
"filterIndex": 2,
"filterLabel": "Shadow",
"filterURL": "url(#filter2)",
"filterEffects": [{
"name": "feOffset",
"attributes": [{
"name": "dx",
"value": 20
}, {
"name": "dy",
"value": 20
}, {
"name": "result",
"value": "offOut"
}, {
"name": "in",
"value": "SourceAlpha"
}]
}, {
"name": "feGaussianBlur",
"attributes": [{
"name": "stdDeviation",
"value": 7
}, {
"name": "in",
"value": "offOut"
}, {
"name": "result",
"value": "blurOut"
}]
}, {
"name": "feBlend",
"attributes": [{
"name": "mode",
"value": "normal"
}, {
"name": "in2",
"value": "blurOut"
}, {
"name": "in",
"value": "SourceGraphic"
}]
}]
}, {
"_id": "filter1",
"filterIndex": 1,
"filterLabel": "Blur",
"filterURL": "url(#filter1)",
"filterEffects": [{
"name": "feGaussianBlur",
"attributes": [{
"name": "stdDeviation",
"value": 5
}]
}]
}, {
"_id": "filter2",
"filterIndex": 2,
"filterLabel": "Shadow",
"filterURL": "url(#filter2)",
"filterEffects": [{
"name": "feOffset",
"attributes": [{
"name": "dx",
"value": 20
}, {
"name": "dy",
"value": 20
}, {
"name": "result",
"value": "offOut"
}, {
"name": "in",
"value": "SourceAlpha"
}]
}, {
"name": "feGaussianBlur",
"attributes": [{
"name": "stdDeviation",
"value": 7
}, {
"name": "in",
"value": "offOut"
}, {
"name": "result",
"value": "blurOut"
}]
}, {
"name": "feBlend",
"attributes": [{
"name": "mode",
"value": "normal"
}, {
"name": "in2",
"value": "blurOut"
}, {
"name": "in",
"value": "SourceGraphic"
}]
}]
}]
// first method:
var uniqueFilters = [];
for(let i = 0; i < filters.length; i++) {
if(uniqueFilters.indexOf(filters[i]) == -1){
uniqueFilters.push(filters[i])
}
}
console.log("first method")
console.log("original array length:" + filters.length)
console.log("unique array length:" + uniqueFilters.length)
// second method:
//var uniqueFilters = filters.filter(function(elem, index, self) {
// return index == self.indexOf(elem);
//});
//console.log("second method")
//console.log("original array length:" + filters.length)
//console.log("unique array length:" + uniqueFilters.length)
// suggested method 1:
var newUniqueFilters = Array.from(new Map(filters.map(f => [f._id, f])).values());
console.log(newUniqueFilters)
You can use a Map:
filters = Array.from(new Map(filters.map(f => [f._id, f])).values());
This assumes that it is enough to compare the _id values, which uniquely identify filters.
Note that comparing objects themselves (with indexOf or similar methods) will never show duplicates, as all the objects are different references (copies), even though they look the same. In general {} === {} is always false.
It's not working because every element in filter array has different memory location and object are compared by the memory location.
So every time you compare that object exist of filter array in uniqueFilters, it simply doesn't exist because every object has different memory location.
so it will push every element in uniqueFilters.
Try changing this line
if(uniqueFilters.indexOf(filters[i]) == -1){
to
if(uniqueFilters.indexOf(filters[i]) === -1){
If not worikingn you can too try comparing a specific attibute to all uniqueFilter
searching the specific value in nested object and returning the updated original object with only searched item using javascript
var people= {
"i": [
{
"country": "Australia",
"list": [
{
"name": "ABC ",
"address": "AB street ",
}
]
},
{
"country": "Brazil",
"list": [
{
"name": "XZ ",
"address": "AB street "
},
...
]
}
]
...
};
I want to search by name.
Using function Object.keys() and breaking the deepest loop when a key === searchedText.
var pages = { "1": [{ "title": "Australia", "list": [{ "key": "Base1", "label": "Base-label", "description": "description" }, { "key": "Base1", "label": "Base-label", "description": "description" } ] }], "2": [{ "title": "Australia", "list": [{ "key": "Base1", "label": "Base-label", "description": "description" }, { "key": "Base1", "label": "Base-label", "description": "description" }, { "key": "Base1", "label": "Base-label", "description": "description" } ] }, { "title": "Netherlands", "list": [{ "key": "Base1", "label": "Base-label", "description": "description" }, { "key": "Base2", "label": "Base-label", "description": "description" }, { "key": "Base1", "label": "Base-label", "description": "description" } ] } ], "3": [{ "title": "Usa", "list": [{ "key": "Base2", "label": "Base-label", "description": "description" }, { "key": "Base1", "label": "Base-label", "description": "description" } ] }, { "title": "Canada", "list": [{ "key": "Base1", "label": "Base-label", "description": "description" }, { "key": "Base1", "label": "Base-label", "description": "description" }, { "key": "Base2", "label": "Base-label", "description": "description" } ] } ]};
var filteredPages = {};
var searchedText = "Base2";
for (var k of Object.keys(pages)) {
for (var o of pages[k]) {
for (var io of o.list) {
if (io.key.toLowerCase().indexOf(searchedText.toLowerCase()) !== -1) {
filteredPages[k] = filteredPages[k] || [];
filteredPages[k].push({
title: o.title,
list: [io]
});
}
}
}
}
console.log(filteredPages)
.as-console-wrapper {
max-height: 100% !important;
top: 0;
}