Basically I have this JavaScript array:
const a = [
{name: 'Foo', place: 'US', age: 15},
{name: 'Foo', place: 'UK', age: 21},
{name: 'Bar', place: 'Canada', age: 20},
{name: 'Bar', place: 'China', age: 22}
];
What is the fastest way to make it look like this? (Where the name becomes a single object property in the "a" array). How would I iterate over the array?
const a = [
{
name: 'Foo',
data: [
{
place: 'US', age: 15
},
{
place: 'UK', age: 21
}
]
},
{
name: 'Bar',
data: [
{
place: 'Canada', age: 20
},
{
place: 'China', age: 22
}
]
}
];
Thank you!
You can make use of reduce function to group data based on name property and then take Object.values.
var a = [
{name: 'Foo', place: 'US', age: 15},
{name: 'Foo', place: 'UK', age: 21},
{name: 'Bar', place: 'Canada', age: 20},
{name: 'Bar', place: 'China', age: 22}
];
var result = Object.values(a.reduce((acc, {name, ...rest})=>{
acc[name] = acc[name] || {name, data:[]};
acc[name].data = [...acc[name].data, rest];
return acc;
},{}));
console.log(result);
One way could be to use an ES6 Map. You can use .reduce() to accumulate the objects in a to the Map. Each name can be a key in the map and each value within the map will be an array of objects which have that key as a name. Once you have built the Map, you can use Array.from() to convert the Map to an array, while also providing a mapping function to convert the entries [name, data[]] to objects while the Map to array conversion occurs.
See example below:
const a = [
{name: 'Foo', place: 'US', age: 15},
{name: 'Foo', place: 'UK', age: 21},
{name: 'Bar', place: 'Canada', age: 20},
{name: 'Bar', place: 'China', age: 22}
];
const res = Array.from(a.reduce((m, {name, ...r}) => {
return m.set(name, (m.get(name) || []).concat(r));
}, new Map), ([name, data]) => ({name, data}));
console.log(res);
Related
Given the following structure:
const data = {
"show": "Family Guy",
"characters": [
[{name: 'Peter', age: 40, city: 'Quahog'}],
[{name: 'Louis', age: 30}],
[{name: 'Chris', age: 16}],
[{name: 'Stewie', age: 1}]
]
}
How can we add to each character the key/value pair of city: 'Quahog' so the output looks as follows:
const item = {
"show": "Family Guy",
"characters": [
[{name: 'Peter', age: 40, city: 'Quahog'}],
[{name: 'Louis', age: 30, city: 'Quahog'}], // city added
[{name: 'Chris', age: 16, city: 'Quahog'}], // city added
[{name: 'Stewie', age: 1, city: 'Quahog'}] // city added
]
}
We tried using:
let city = data.characters.[0][0].city;
costs = _.map(items, (itemArray) => {
items = _.map(itemArray, (item) => {
if(!item.city) {
item.city = city;
}
});
But it's not working as intended and we can't get the desired output. Any idea how to accomplish this?
Not sure about the reason for having these single item arrays but this solution will do the work (I'll recommend you take a look at the process that creates this data format which is a little weird)
const data = {
"show": "Family Guy",
"characters": [
[{name: 'Peter', age: 40, city: 'Quahog'}],
[{name: 'Louis', age: 30}],
[{name: 'Chris', age: 16}],
[{name: 'Stewie', age: 1}]
]
}
const city = data.characters.find(characters => characters.find(character => character.city))[0].city
const dataWithCities = {
...data,
characters: data.characters.map(characters => characters.map(character => character.city ? character : {...character, city}))
}
console.log(dataWithCities)
Here is another way of doing it with .reduce():
const data = {
"show": "Family Guy",
"characters": [
[{name: 'Peter', age: 40, city: 'Quahog'}],
[{name: 'Louis', age: 30}],
[{name: 'Chris', age: 16}],
[{name: 'Stewie', age: 1}]
]
};
data.characters.reduce((a,c)=>
(c[0].city=a[0].city,a));
console.log(data);
When using .reduce() without a second argument it will pick up the first array element as the initial value which is then used as a template to copy the .city property to all the other elements. The actual return value of the .reduce() method is discarded but the input array itself (data) is modified in the process and is then shown in the console.log() expression.
try this one
let city = data.characters.[0][0].city;
let newdata = [];
data.characters.map(items, (itemArray) => {
items = _.map(itemArray, (item) => {
if(item.city === undefined) {
newdata.push({...item , city});
} else {
newdata.push({...item});
}
})
costs = {...newdata}
You can do this without lodash
const data = {
"show": "Family Guy",
"characters": [
[{name: 'Peter', age: 40, city: 'Quahog'}],
[{name: 'Louis', age: 30}],
[{name: 'Chris', age: 16}],
[{name: 'Stewie', age: 1}]
]
}
const chars = data.characters.map((x)=>{
return {...x[0] , city : x[0].city ? x[0].city : city}
})
const items = {...data , characters : chars};
const { city } = data.characters.find(([item]) => !!item.city?.length)[0];
const newData = {
...data,
characters: data.characters.map(([char]) => [{ ...char, city }])
};
Summary:
Thanks for reading! I'm stuck trying to figure out how to pass multiple variables (of unknown quantity) into an argument that is taking in an array of objects (of unknown quantity) In short: I want to filter out people that don't match all of the criteria listed from within another array (I'm also open to using rest instead of an array).
Code access:
codePen: (its a mess) https://codepen.io/gold240sx/pen/NWXJKLv?editors=0011
Additional code I found helpful for getting the key value pair: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries
For this Question I'm using an existing example from: https://sebhastian.com/javascript-filter-array-multiple-values/ :
let filteredPeople = people.filter(function (currentElement) {
return currentElement.country === "America" && currentElement.age <
25; });
console.log(filteredPeople);
This is awesome except its assuming I already know the params I'm seeking to filter by and the elements I'm seeking to look for associated params.
// Object Arrays:
let people = [
{name: "Steve", age: 27, country: "America"},
{name: "Linda", age: 23, country: "Germany"},
{name: "Jimena", age: 29, country: "Spain"},
{name: "Eric", age: 24, country: "England"},
{name: "Jacob", age: 24, country: "America"},
];
let filters = [
{country: "America"},
{Age: 24}
];
// Function: (Attempt)
const filterMatch = {}
const filterThePeople = ((data, filters) => {
filters.forEach(filter => {
//==========get key and value of filter=====================
for (const [key, value] of Object.entries(filter)) {
filterMatch[key] = value
return {key, value}
}
})
data.forEach(person => {
for (const [key2, value2] of Object.entries(data)) {
return {key2, value2}
}
})
})
console.log(filterThePeople(people, filters))
I'm not sure whether to place the "data.forEach..." statement inside the for statement above... I was thinking of placing an if or switch statement saying to look through the array for each key and when it finds a matching key, then it will look at the value of each and if both keys and values match then += to a list... eventually to return the list to the function. (at least that's the solution I imagine in my head. I'm totally open to any and all alternative ways of accomplishing this!)
Filter People that match every filter.. I might add that the naming of the KEY is very important here. In your example you had Age as a capital later. This also allows you to construct filters like this:
let filters = [ {country: "America", age: 24} ];
let people = [ { name: "Steve", age: 27, country: "America", }, { name: "Linda", age: 23, country: "Germany", }, { name: "Jimena", age: 29, country: "Spain", }, { name: "Eric", age: 24, country: "England", }, { name: "Jacob", age: 24, country: "America", }, ];
let filters = [
{country: "America"},
{age: 24}
];
let results = people.filter(p =>
filters.every(f=> Object.keys(f).every(k => p[k] === f[k]))
)
console.log(results);
You can do something like this
let people = [
{name: "Steve", age: 27, country: "America"},
{name: "Linda", age: 23, country: "Germany"},
{name: "Jimena", age: 29, country: "Spain"},
{name: "Eric", age: 24, country: "England"},
{name: "Jacob", age: 24, country: "America"},
];
let filters = [
{country: "America"},
{age: 24}
];
const filtered = people.filter(p => filters.every(f => {
const [key] = Object.keys(f)
return p[key] === f[key]
}))
console.log(filtered)
I have an array of json elements. and I want to filter the array based on the specific values. below is the array.
var arr = [
{name: bobby, id: 1, age: 23},
{name: charls, id: 2, age: 28},
{name: indi, id: 3, age: 23},
{name: charlie, id: 4, age: 25}]
from the above array I want to filter only staff whose names are bobby && indi. I have tried below code.
var filteredArray;
for (var i =0 ; i < arr.length; i++){
if(arr[i].name === 'bobby' || arr[i].name === 'indi'){
filteredArray.push(arr[i]);
}
}
but through the above code, I need to mention OR(||) conditions too many times and these number of names can change like 1 time I want only staff with Bobby name and other time I want Bobby, Indi and Charlie. is there a way to make it dynamic. if yes, please let me know. Thanks in advance.
You can store names that needs to be filters in an array and then check if name exists in array or not
eg.
var arr = [
{name: "bobby", id: 1, age: 23},
{name: "charls", id: 2, age: 28},
{name: "indi", id: 3, age: 23},
{name: "charlie", id: 4, age: 25}
]
const names = ["bobby", "indi"];
const filtered = arr.filter((item)=>{
return names.includes(item.name)
});
console.log(filtered)
For older(eg. IE11) browsers -
var arr = [
{name: "bobby", id: 1, age: 23},
{name: "charls", id: 2, age: 28},
{name: "indi", id: 3, age: 23},
{name: "charlie", id: 4, age: 25}
]
const names = ["bobby", "indi"];
const filtered = [];
for(var i =0; i<arr.length - 1; i++){
if(names.indexOf(arr[i].name) > -1){
filtered.push(arr[i])
}
}
console.log(filtered)
You can use Array.includes() to filter items as followings:
var arr = [
{name: 'bobby', id: 1, age: 23},
{name: 'charls', id: 2, age: 28},
{name: 'indi', id: 3, age: 23},
{name: 'charlie', id: 4, age: 25}
]
const keywords = ['bobby', 'indi'] // You can add keywords to be filtered to this array to make it dynamic
const filtered = arr.filter(item => keywords.includes(item.name))
console.log(filtered)
You could create an array of names you want to filter and then:
if you want to stick to pre-ES6 coding:
var arr = [{
name: 'bobby',
id: 1,
age: 23
},
{
name: 'charls',
id: 2,
age: 28
},
{
name: 'indi',
id: 3,
age: 23
},
{
name: 'charlie',
id: 4,
age: 25
}
];
var names = ['bobby', 'indi'];
var filteredArray = [];
for (var i = 0; i < arr.length; i++) {
if (names.indexOf(arr[i].name) > -1) filteredArray.push(arr[i]);
}
console.log(filteredArray);
or, if you are willing to switch to ES6+ coding:
const arr = [{
name: 'bobby',
id: 1,
age: 23
},
{
name: 'charls',
id: 2,
age: 28
},
{
name: 'indi',
id: 3,
age: 23
},
{
name: 'charlie',
id: 4,
age: 25
}
];
const names = ['bobby', 'indi'];
const filteredArray = arr.filter(item => names.includes(item.name));
console.log(filteredArray);
I want to get all name from the array of data. Is there any way to do it without using an iterator?
const data = [
{name: 'Rushabh', age: 22},
{name: 'Bonny', age: 24}
]
console.log(Object.values(data));
Try this:
const data = [
{name: 'Rushabh', age: 22},
{name: 'Bonny', age: 24}
]
const names = data.map(({name}) => name)
console.log(names);
the names will include the list of names.
For getting only a single property, you need to map this property directly.
const
data = [{ name: 'Rushabh', age: 22 }, { name: 'Bonny', age: 24 }],
result = data.map(({ name }) => name); // get only name
console.log(result);
Without some kind of iterator you can not do that. You can use map() with short hand property.
const data = [
{name: 'Rushabh', age: 22},
{name: 'Bonny', age: 24}
]
const name = data.map(({name}) => name);
console.log(name);
Use Array.map() and extract the name property:
const data = [
{name: 'Rushabh', age: 22},
{name: 'Bonny', age: 24}
]
console.log(data.map(x => x.name));
If you are using JQuery, do this:
const data = [
{name: 'Rushabh', age: 22},
{name: 'Bonny', age: 24}
]
var names = $.map( data, function(item, key) { return item.name; } );
// names : ['Rushabh', 'Bonny']
I have an array of JSON object as shown below:
var data = [
{name: '', age: 12},
{name: 'bcd', age: 15},
{name: 'cdf', age: 13},
{name: '', age: 11},
{name: 'fgh', age: 8},
{name: '', age: 10},
];
using underscore I want to trim this object in such a way that it should return:
[{name: 'bcd', age: 15},
{name: 'cdf', age: 13},
{name: '', age: 11},
{name: 'fgh', age: 8}]
I tried with below code:
var firstIndex = _.indexOf(data, _.find(data, function(d){ return d.name !== ''; }));
var lastIndex = _.indexOf(data, _.find(data.slice().reverse(), function(d){ return d.name !== ''; }));
console.log(data.slice(firstIndex, lastIndex + 1) );
But I think, there should be a better way than this.
Here is the JSFiddle
Edit:
I want all data from the top and bottom to be trimmed where name is blank. But not in middle of the array element.
Same as string.Trim() method. when I apply trim on " one two three " text, it will remove blank space from the starting and end but not the space between words.
your logic is fine, just use _.findLastIndex() instead of using _.findIndex() on the reversed array:
const data = [
{name: '', age: 7},
{name: '', age: 12},
{name: 'bcd', age: 15},
{name: 'cdf', age: 13},
{name: '', age: 11},
{name: 'fgh', age: 8},
{name: '', age: 10},
{name: '', age: 12},
{name: '', age: 14},
];
function trimArray(predicate, arr) {
const start = _.findIndex(arr, predicate);
const end = _.findLastIndex(arr, predicate);
return arr.slice(start, end + 1);
}
const result = trimArray((o) => o.name !== '', data);
console.log(result);
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
Looks like you want to return the array without first and last item, then use slice
var trimmedData = data.slice( 1, data.length - 1 );
I want all data from the top and bottom to be trimmed where name is
blank. But not in middle of the array element.
Define a trimLeftFn
var trimLeftFn = arr => {
var hasValue = false;
arr = arr.filter( s => {
hasValue = hasValue || s.name.length > 0;
return hasValue;
});
return arr;
};
var trimmedData = trimLeftFn( trimLeftFn (data ).reverse() ).reverse();
Demo
var data = [
{name: '', age: 12},
{name: 'bcd', age: 15},
{name: 'cdf', age: 13},
{name: '', age: 11},
{name: 'fgh', age: 8},
{name: '', age: 10},
];
var trimLeftFn = arr => {
var hasValue = false;
arr = arr.filter(s => {
hasValue = hasValue || s.name.length > 0;
return hasValue;
});
return arr;
};
var trimmedData = trimLeftFn(trimLeftFn(data).reverse()).reverse();
console.log(trimmedData);