having an array with objects and inside an options array how do I filter the inner array of objects by key value?
Here is the following example:
let test = [{
"options": [{
"label": "Audi",
"value": 10
},
{
"label": "BMW",
"value": 18
},
{
"label": "Mercedes Benz",
"value": 116
},
{
"label": "VW",
"value": 184
}
],
"label": "test1"
},
{
"options": [{
"label": "Adler",
"value": 3664
},
{
"label": "Alfa Romeo",
"value": 3
},
{
"label": "Alpine",
"value": 4
}
],
"label": "test2"
}
]
how do I get back the object:
{
"label": "Audi",
"value": 10
}
if I filter with keyword Audi
return label.toLowerCase().includes(inputValue.toLowerCase());
I tried with the following
test.map((k) => {
res = k.options.filter((j) => {
inputValue.toLowerCase();
if (j.label.toLowerCase().includes(inputValue.toLowerCase())) {
return j;
}
});
});
You need to return the result of filter(), not just assign it to a variable, so that map() will return the results.
let test = [{
"options": [{
"label": "Audi",
"value": 10
},
{
"label": "BMW",
"value": 18
},
{
"label": "Mercedes Benz",
"value": 116
},
{
"label": "VW",
"value": 184
}
],
"label": "test1"
},
{
"options": [{
"label": "Adler",
"value": 3664
},
{
"label": "Alfa Romeo",
"value": 3
},
{
"label": "Alpine",
"value": 4
}
],
"label": "test2"
}
]
let inputValue = "audi";
let search = inputValue.toLowerCase();
let result = test.map(k => k.options.filter(j => j.label.toLowerCase().includes(search)));
console.log(result);
This will return all options matching the search query :
function find(array, query) {
return array.reduce((prev, current) => prev.concat(current.options), []).filter(item => item.label.includes(query))
}
find(test, 'Audi')
Use flatMap() followed by filter():
let test=[{options:[{label:"Audi",value:10},{label:"BMW",value:18},{label:"Mercedes Benz",value:116},{label:"VW",value:184}],label:"test1"},{options:[{label:"Adler",value:3664},{label:"Alfa Romeo",value:3},{label:"Alpine",value:4}],label:"test2"}]
let result = test.flatMap(el => {
return el.options.filter(car => car.label == "Audi")
})[0]
console.log(result)
You need to go two levels deep when traversing your array.
function filterArray(needle, haystack) {
return haystack
.map(h => h.options)
.flatMap(h => h )
.filter(h => h.label.toLowerCase().includes(needle.toLowerCase()));
CodeSandbox
This might gile your answer:
console.log(test[0].options[0]);
Related
I have below array object of key of Id and List of value pair. I want to get for each key what is the length of the value like
[
{
"key": "a5a5E0000003uzTQAQ",
"value": 1
},
{
"key": "a5a5E0000003uzYQAQ",
"value": 2
}
]
I am trying below code , but it is giving me undefined in the length of the value.
var message = [
{
"key": "a5a5E0000003uzTQAQ",
"value": [
{
"Name": "Features1"
}
]
},
{
"key": "a5a5E0000003uzYQAQ",
"value": [
{
"Name": "AEO Analysis - Engagement"
},
{
"Name": "AEO Analysis - Engagement 1",
}
]
}
]
let noOfFields = []
for (let key in message) {
if (message.hasOwnProperty(key)) {
noOfFields.push({key: key, value: message[key].length });
}
}
console.log(noOfFields)
You can use array.map
const message = [
{
"key": "a5a5E0000003uzTQAQ",
"value": [
{
"Name": "Features1"
}
]
},
{
"key": "a5a5E0000003uzYQAQ",
"value": [
{
"Name": "AEO Analysis - Engagement"
},
{
"Name": "AEO Analysis - Engagement 1",
}
]
}
]
const noOfFields = message.map((obj) => {
return {
key: obj.key,
value: obj.value.length
}
})
console.log(noOfFields)
Result:
[
{ key: 'a5a5E0000003uzTQAQ', value: 1 },
{ key: 'a5a5E0000003uzYQAQ', value: 2 }
]
If you want the length you just need this:
var message = [
{
"key": "a5a5E0000003uzTQAQ",
"value": [
{
"Name": "Features1"
}
]
},
{
"key": "a5a5E0000003uzYQAQ",
"value": [
{
"Name": "AEO Analysis - Engagement"
},
{
"Name": "AEO Analysis - Engagement 1",
}
]
}
]
let noOfFields = []
for (let key in message) {
if (message.hasOwnProperty(key)) {
noOfFields.push({key: key, value: message[key].value.length });
}
}
console.log(noOfFields)
It's a little misleading to call the length of the value 'value' though.
All code is here:
https://stackblitz.com/edit/angular-foormat-wi?file=src/app/app.component.ts
You can see array with 3 object but inside object also you can see array...
I need split all array to be object.
Check code:
this.allFilters.push(
Array.isArray(data.value)
? data.value.map((obj: any) => {
return {
name: obj.name,
value: obj.value
};
})
: { name: data.name, value: data.value }
);
Html print not important this is only for view json.
Right now my allFilters var is like :
[{ "name": "one", "value": 1 }, { "name": "two", "value": 2 }, { "name": "three", "value": 3 }],
{"name": "Second", "value": 15 },
[{ "name": "one", "value": 1 }, { "name": "two", "value": 2 }, { "name": "three", "value": 3 }, { "name": "four", "value": 4 }]
Array with inside Array, Object, Array but I need like this:
[
{ "name": "one", "value": 1 }, { "name": "two", "value": 2 }, { "name": "three", "value": 3 },
{"name": "Second", "value": 15 },
{ "name": "one", "value": 1 }, { "name": "two", "value": 2 }, { "name": "three", "value": 3 }, { "name": "four", "value": 4 }
]
I expect array of objects.
No array of mix array and object.
Just object inside.
When data.value is an array and even if you do map it will give you the same result.
Modify your recieveMessage(data) and use array.concat() when it is an array.
recieveMessage(data) {
if (Array.isArray(data.value)) {
this.allFilters = this.allFilters.concat(data.value);
} else {
this.allFilters.push({ name: data.name, value: data.value });
}
}
With ternary operator,
recieveMessage(data) {
Array.isArray(data.value) ?
this.allFilters = this.allFilters.concat(data.value)
:
this.allFilters.push({ name: data.name, value: data.value });
}
Just spread the map() result
const allFilters = []
const recieveMessage = (data) => {
if (Array.isArray(data.value)) {
allFilters.push(...data.value.map(obj => ({ ...obj})))
} else {
allFilters.push({ ...data})
}
}
data.forEach(recieveMessage)
console.log(allFilters)
<script>
const data=[{name:"First",value:[{name:"one",value:1},{name:"two",value:2},{name:"three",value:3}]},{name:"Second",value:15},{name:"Third",value:[{name:"one",value:1},{name:"two",value:2},{name:"three",value:3},{name:"four",value:4}]}];
</script>
I have an object with the structure of:
[
{
"id": "NONSTOPS",
"label": "Nonstop",
"value": "no"
},
{
"id": "REWARDS",
"label": "Rewards",
"value": "no"
},
{
"id": "SEAT",
"label": "Seats",
"value": "no"
},
{
"id": "BAGS",
"label": "Bags",
"value": "no"
}
]
and an array with a structure of
["NONSTOPS", "REWARDS"]
To return
[
{
"id": "NONSTOPS",
"label": "Nonstop",
"value": "yes"
},
{
"id": "REWARDS",
"label": "Rewards",
"value": "yes"
},
{
"id": "SEAT",
"label": "Seats",
"value": "no"
},
{
"id": "BAGS",
"label": "Bags",
"value": "no"
}
]
Based on the array, it would search the object and change the value to "yes" if there exists an ID on the array.
Here's my code so far
for(let i=0; i< obj.length; i++){
for(let j = 0; j<array.length; j++){
if(obj[i].id === array[j]){
obj[i].value ='yes'
}
}
}
Something seems off about my code and I was wondering if there was an easier way to do this, maybe with a mapper of some sorts?
Can probably use a .forEach and an indexOf check on your array (just to be more concise, there's nothing wrong with your approach)
obj.forEach(o => {
if (array.indexOf(o.id) > -1) o.value = "yes";
});
You can use includes
const data = [{
"id": "NONSTOPS",
"label": "Nonstop",
"value": "no"
},
{
"id": "REWARDS",
"label": "Rewards",
"value": "no"
},
{
"id": "SEAT",
"label": "Seats",
"value": "no"
},
{
"id": "BAGS",
"label": "Bags",
"value": "no"
}
]
const lookup = ["NONSTOPS", "REWARDS"];
const reduced = data.map(d => {
return {id: d.id, label: d.label, value: lookup.includes(d.id) ? "YES" : "NO"}
});
console.log(reduced);
You can use a simple for of loop to iterate over the array of objects and then check with the built in includes function if the value exist in the flat array.
const arr = [
{
"id": "NONSTOPS",
"label": "Nonstop",
"value": "no"
},
{
"id": "REWARDS",
"label": "Rewards",
"value": "no"
},
{
"id": "SEAT",
"label": "Seats",
"value": "no"
},
{
"id": "BAGS",
"label": "Bags",
"value": "no"
}
]
const arrToCompare = ["NONSTOPS", "REWARDS"]
for (let obj of arr) {
// you can use includes to find is the value exist in the arrToCompare
if (arrToCompare.includes(obj.id)) {
// if exists then mutate it
obj.value = 'yes';
}
}
console.log(JSON.stringify(arr, null, 4));
In the question you have mentioned that you want to return the valid elements. You can use filter() for the same.
var result = obj.filter(o => (array.indexOf(o.id) > -1) );
The JSON provided is kind of unstructured and doesn't meet many of my
requirements. I have tried this many ways but does take a very long time
when I provide 100,000 records
Implemented Code
for (var f in stack.data) {
var field = new Object();
for (var o in stack.data[f]['field_values']) {
field[stack.data[f]['field_values'][o]['field_name']] = stack.data[f]['field_values'][o]['value'];
}
stack.data[f]['field_values'] = field;
}
console.log(JSON.stringify(stack, null, 2));
Input JSON:
var stack = {
"data": [{
"id": 950888888073,
"name": "www.stackoverflow.com",
"field_values": [{
"field_name": "Newsletter?",
"value": true
},
{
"field_name": "Parent",
"value": 950888661
},
{
"field_name": "Birthday",
"value": "2018-04-29"
},
{
"field_name": "Related matter",
"value": 1055396205
},
{
"field_name": "Referral",
"value": "Don Ho"
},
{
"field_name": "Spouse",
"value": "Wo Fat"
}
]
}]
}
Expected Output:
{
"data": [
{
"id": 950888888073,
"name": "www.stackoverflow.com",
"field_values": {
"Newsletter?": true,
"Parent": "Gigi Hallow",
"Birthday": "2018-04-29",
"Related": "2012-00121-Sass",
"Referral": "Don Ho",
"Spouse": "Wo Fat"
}
Sometimes "field_values can be empty. Need to check them as well
{
"id": 950821118875,
"name": "www.google.com",
"field_values": [],
}
This is mostly re-arranging the values. Here values becomes keys. There should actually be one liner to handle this, but i am run out of options.
Hope the question is clear
It would probably help to declare a variable to hold the array element, rather than doing 4 levels of indexing every time through the loop. You can also use destructuring to extract the properties of the object.
And use {} rather than new Object.
Even if this doesn't improve performance, it makes the code easier to read.
var stack = {
"data": [{
"id": 950888888073,
"name": "www.stackoverflow.com",
"field_values": [{
"field_name": "Newsletter?",
"value": true
},
{
"field_name": "Parent",
"value": 950888661
},
{
"field_name": "Birthday",
"value": "2018-04-29"
},
{
"field_name": "Related matter",
"value": 1055396205
},
{
"field_name": "Referral",
"value": "Don Ho"
},
{
"field_name": "Spouse",
"value": "Wo Fat"
}
]
}]
}
for (var f in stack.data) {
const field = {};
const fobj = stack.data[f];
for (var o in fobj.field_values) {
const {field_name, value} = fobj.field_values[o];
field[field_name] = value;
}
fobj.field_values = field;
}
console.log(JSON.stringify(stack, null, 2));
I'm trying to transform this JSON into array so that I can simply list them as key-value pairs in html. The JSON has nested properties which I want to retain but I want to stringify only those objects that contain "units" and "value". All others should be listed as children items. Please help figure what I'm doing wrong.
Here's the json input:
{
"clusterName": "ml6.engrlab.com-cluster",
"statusProperties": {
"loadProperties": {
"loadDetail": {
"restoreWriteLoad": {
"value": 0,
"units": "sec/sec"
},
},
"totalLoad": {
"value": 0.0825921967625618,
"units": "sec/sec"
}
},
"secure": {
"value": false,
"units": "bool"
},
"statusDetail": {
"licenseKeyOption": [
{
"value": "conversion",
"units": "enum"
},
{
"value": "failover",
"units": "enum"
}
],
"connectPort": 7999,
"softwareVersion": {
"value": 9000100,
"units": "quantity"
}
},
"rateProperties": {
"rateDetail": {
"largeReadRate": {
"value": 0,
"units": "MB/sec"
}
},
"totalRate": {
"value": 67.2446365356445,
"units": "MB/sec"
}
},
"online": {
"value": true,
"units": "bool"
},
"cacheProperties": {
"cacheDetail": {
"tripleCachePartitions": {
"tripleCachePartition": [
{
"partitionSize": 768,
"partitionBusy": 0,
"partitionUsed": 0,
"partitionFree": 100
}
]
}
}
}
}
}
my code
function isNested(obj) {
if(!obj) return false;
let propArry = Object.keys(obj)
for(let i=0; i<propArry.length; i++){
if(obj[propArry[0]].constructor.name === 'Object') return true
}
return false;
}
function getKeyValueAsChildren(obj) {
let vals = [];
for(let key in obj) {
if(obj.hasOwnProperty(key)){
vals.push({key:key, value: obj[key]})
}
}
return vals
}
function valueAsString(obj) {
if(typeof obj !== 'object') return obj;
return `${obj['value']} ${obj['units']}`
}
function getChildren(key, obj) {
if(Object.keys(obj).sort().toString() === "units,value"){
return {key: key, value: valueAsString(obj)}
} else {
return {key: key, children: getKeyValueAsChildren(obj) }
}
}
function getValues(properties, values = []) {
for(let key in properties) {
if(properties.hasOwnProperty(key)) {
let value = properties[key]
if(typeof value !== 'object') {
values.push({key: key, value: value})
} else if(Array.isArray(value)){
let children = []
value.map(v => {
children.push(getChildren(key, v))
})
values.push({key: `${key}List`, children: children})
}
else if(value.constructor.name === 'Object' && isNested(value)){
// I THINK THE MAIN PROBLEM IS HERE
let keys = Object.keys(value)
let children = [];
keys.forEach(key => {
children.push({key: key, children: getValues(value[key])})
})
values.push({key: key, children: children})
}
else {
values.push(getChildren(key, value))
}
}
}
return values
}
getValues(hostProperties)
this returns
[
{
"key": "clusterName",
"value": "ml6.engrlab.com-cluster"
},
{
"key": "statusProperties",
"children": [
{
"key": "loadProperties",
"children": [
{
"key": "loadDetail",
"children": [
{
"key": "restoreWriteLoad",
"children": [
{
"key": "value",
"value": 0
},
{
"key": "units",
"value": "sec/sec"
}
]
}
]
},
{
"key": "totalLoad",
"value": "0.0825921967625618 sec/sec"
}
]
},
{
"key": "secure",
"children": [
{
"key": "value",
"value": false
},
{
"key": "units",
"value": "bool"
}
]
},
{
"key": "statusDetail",
"children": [
{
"key": "licenseKeyOptionList",
"children": [
{
"key": "licenseKeyOption",
"value": "conversion enum"
},
{
"key": "licenseKeyOption",
"value": "failover enum"
}
]
},
{
"key": "connectPort",
"value": 7999
},
]
},
{
"key": "rateProperties",
"children": [
{
"key": "rateDetail",
"children": [
{
"key": "largeReadRate",
"children": [
{
"key": "value",
"value": 0
},
{
"key": "units",
"value": "MB/sec"
}
]
}
]
},
{
"key": "totalRate",
"value": "67.2446365356445 MB/sec"
}
]
},
{
"key": "online",
"children": [
{
"key": "value",
"value": true
},
{
"key": "units",
"value": "bool"
}
]
},
{
"key": "cacheProperties",
"children": [
{
"key": "cacheDetail",
"children": [
{
"key": "tripleCachePartitions",
"children": [
{
"key": "tripleCachePartitionList",
"children": [
{
"key": "tripleCachePartition",
"children": [
{
"key": "partitionSize",
"value": 768
},
{
"key": "partitionBusy",
"value": 0
},
{
"key": "partitionUsed",
"value": 0
},
{
"key": "partitionFree",
"value": 100
}
]
}
]
}
]
}
]
}
]
}
]
}
]
but I need this
[
{
"key": "clusterName",
"value": "ml6.engrlab.com-cluster"
},
{
"key": "statusProperties",
"children": [
{
"key": "loadProperties",
"children": [
{
"key": "loadDetail",
"children": [
{
"key": "restoreWriteLoad",
"value": "0 sec/sec"
}
]
},
{
"key": "totalLoad",
"value": "0.0825921967625618 sec/sec"
}
]
},
{
"key": "secure",
"value": "false bool"
},
{
"key": "statusDetail",
"children": [
{
"key": "licenseKeyOptionList",
"children": [
{
"key": "licenseKeyOption",
"value": "conversion enum"
},
{
"key": "licenseKeyOption",
"value": "failover enum"
}
]
},
{
"key": "connectPort",
"value": 7999
}
]
},
{
"key": "rateProperties",
"children": [
{
"key": "rateDetail",
"children": [
{
"key": "largeReadRate",
"value": "0 MB/sec"
}
]
},
{
"key": "totalRate",
"value": "67.2446365356445 MB/sec"
}
]
},
{
"key": "online",
"value": "true bool"
},
{
"key": "cacheProperties",
"children": [
{
"key": "cacheDetail",
"children": [
{
"key": "tripleCachePartitions",
"children": [
{
"key": "tripleCachePartitionList",
"children": [
{
"key": "tripleCachePartition",
"children": [
{
"key": "partitionSize",
"value": 768
},
{
"key": "partitionBusy",
"value": 0
},
{
"key": "partitionUsed",
"value": 0
},
{
"key": "partitionFree",
"value": 100
}
]
}
]
}
]
}
]
}
]
}
]
}
]
You might have to run more tests, as what you require seems quite arbitrary, but I believe this function does what you are looking for. It works in a similar way to yours, by simply recursing the tree, and checking for object types, and if the special case is matched.
function toKeyValue(obj) {
return Object.keys(obj).map(k => {
var value = obj[k]
var key = k
var valueName = 'children'
if(Array.isArray(value)){
key = k + 'List'
value = value.map(toKeyValue)
}else if(value !== null && typeof value === 'object'){
// check for special case
if(Object.keys(value).sort().toString() === "units,value"){
value = value.value + ' ' + value.units
valueName = 'value'
}else{
value = toKeyValue(value)
}
}else{
valueName = 'value'
}
return {
key: key,
[valueName]: value
}
})
}
Fiddle here