I have a array of makes as follows:
const makes = [
{id: "4", name: "Audi"},
{id: "5", name: "Bmw"},
{id: "6", name: "Porsche"},
{id: "31", name: "Seat"},
{id: "32", name: "Skoda"},
{id: "36", name: "Toyota"},
{id: "38", name: "Volkswagen"}
]
And I want to sort that array based on another array:
const preferred_makes = ['Volkswagen', 'Audi'];
What I do now is as follows:
const preferred_makes = ['Volkswagen', 'Audi'];
const makes = [
{id: "4", name: "Audi"},
{id: "5", name: "Bmw"},
{id: "6", name: "Porsche"},
{id: "31", name: "Seat"},
{id: "32", name: "Skoda"},
{id: "36", name: "Toyota"},
{id: "38", name: "Volkswagen"}
]
const mainMakes = []
const otherMakes = []
makes.map(make => _.includes(preferred_makes, make.name) ? mainMakes.push(make) : otherMakes.push(make))
console.log(mainMakes)
console.log(otherMakes)
But is there any better way? Can I sort makes to show those preferred_makes as first elements of the array?
Here is the fiddle.
A regular array.sort() with a custom comparison function should be able to do this.
const preferred_makes = ['Volkswagen', 'Audi'];
const makes = [
{id: "4", name: "Audi"},
{id: "5", name: "Bmw"},
{id: "6", name: "Porsche"},
{id: "31", name: "Seat"},
{id: "32", name: "Skoda"},
{id: "36", name: "Toyota"},
{id: "38", name: "Volkswagen"}
]
const sorted = makes.slice().sort((a, b) => {
// Convert true and false to 1 and 0
const aPreferred = new Number(preferred_makes.includes(a.name))
const bPreferred = new Number(preferred_makes.includes(b.name))
// Return 1, 0, or -1
return bPreferred - aPreferred
})
console.log(sorted)
You could take an object with the by one incremented indices and take a default value of Infinity for not found names. Then sort by the delta of the values.
var preferred_makes = ['Volkswagen', 'Audi'],
preferred = preferred_makes.reduce((o, k, i) => (o[k] = i + 1, o), {});
array = [{ id: "4", name: "Audi" }, { id: "5", name: "Bmw" }, { id: "6", name: "Porsche" }, { id: "31", name: "Seat" }, { id: "32", name: "Skoda" }, { id: "36", name: "Toyota" }, { id: "38", name: "Volkswagen" }];
array.sort((a, b) => (preferred[a.name] || Infinity) - (preferred[b.name] || Infinity));
console.log(array);
.as-console-wrapper { max-height: 100% !important; top: 0; }
You could use reduce to make two arrays without the requirement for sorting:
const preferred_makes = ['Volkswagen','Audi'];
const makes = [{id:"4",name:"Audi"},{id:"5",name:"Bmw"},{id:"6",name:"Porsche"},{id:"31",name:"Seat"},{id:"32",name:"Skoda"},{id:"36",name:"Toyota"},{id:"38",name:"Volkswagen"}];
const [mainMakes, otherMakes] = makes.reduce(([a, b], { id, name }) => ((preferred_makes.includes(name) ? a : b).push({ id, name }), [a, b]), [[], []]);
console.log(mainMakes);
console.log(otherMakes);
.as-console-wrapper { max-height: 100% !important; top: auto; }
To make it even faster, you could Set.prototype.has instead of includes:
const preferred_makes = new Set(['Volkswagen','Audi']);
const makes = [{id:"4",name:"Audi"},{id:"5",name:"Bmw"},{id:"6",name:"Porsche"},{id:"31",name:"Seat"},{id:"32",name:"Skoda"},{id:"36",name:"Toyota"},{id:"38",name:"Volkswagen"}];
const [mainMakes, otherMakes] = makes.reduce(([a, b], { id, name }) => ((preferred_makes.has(name) ? a : b).push({ id, name }), [a, b]), [[], []]);
console.log(mainMakes);
console.log(otherMakes);
.as-console-wrapper { max-height: 100% !important; top: auto; }
With lodash you can generate a dictionary of the original index by the car's make (indexByMake) using _.invert() to get an object of { [car make]: original array index }, and map the values back to numbers.
Use _.orderBy() to sort the array, and use the values from indexByMake according to the name:
const preferred_makes = ['Volkswagen', 'Audi'];
const array = [{ id: "4", name: "Audi" }, { id: "5", name: "Bmw" }, { id: "6", name: "Porsche" }, { id: "31", name: "Seat" }, { id: "32", name: "Skoda" }, { id: "36", name: "Toyota" }, { id: "38", name: "Volkswagen" }];
const indexByMake = _.mapValues(_.invert(preferred_makes), Number);
const result = _.sortBy(array, ({ name }) => indexByMake[name]);
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
You can also sort by the Array.indexOf if the index is there otherwise use String.localeCompare. No real need for lodash really:
const makes = [ {id: "4", name: "Audi"}, {id: "6", name: "Porsche"}, {id: "31", name: "Seat"}, {id: "32", name: "Skoda"}, {id: "5", name: "Bmw"}, {id: "36", name: "Toyota"}, {id: "38", name: "Volkswagen"} ]
const list = ['Volkswagen', 'Audi'];
let result = makes.sort((a,b) => {
let i = list.indexOf(a.name)
return i < 0 ? a.name.localeCompare(b.name) : list.indexOf(b.name) - i
})
console.log(result)
Related
i am trying to find a list of synced users between two arrays (objArray1 & objArray2) and return the data from objArray1 along with 'aid' in Objarray2. I have the below code working, but i am trying to see if can return 'aid' from objArray2 as well in the below format.
Code sample below
// SystemA
const objArray1 = [
{ id: "1", name: "John" },
{ id: "2", name: "Jack" },
{ id: "3", name: "Sam" },
{ id: "4", name: "Bill" },
];
// SystemB
const objArray2 = [
{ id: "1", name: "John", aid:"uuud2905555" },
{ id: "3", name: "Sam" }, aid:"uuud29029303"
{ id: "5", name: "Bob" }, aid:"uuud29435454"
];
const array1IDs = objArray1.map((item) => {
return item.id
})
// Result: array1IDs = ["1", "2", "3", "4"];
const array2IDs = objArray2.map((item) => {
return item.id
})
// Result: array2IDs = ["1", "3", "5"];
// FIND SYNCED USERS
// Compare the id value of each item in objArray1 with each item of objArray2
// Return the ones that match.
const syncedUsers = objArray1.filter((item) => {
const found = objArray2.find((element) => element.id === item.id);
return found;
});
Required JSON Format, please note that all matching items should be returned from objArray1, with the exception of 'aid' from objArray2
{
"records": [
{
"id": {aid}, // from objArray2
"fields": {
"Name":{name}, // from objArray1
"sid": {id} // from objArray1
}
]
}
Presented below is one possible way to achieve the desired objective.
Code Snippet
// method to create result as "JSON"
const createJSON = (arr1, arr2) => (
// use "stringify" to transform JavaScript object into JSON
JSON.stringify({
// set-up the "records" prop
records: arr2
.filter( // filter to keep only those that have matching "id"
({ id }) => arr1.some(ob => ob.id === id)
)
.map( // de-structure & rename props to match desired objective
({ id : sid, name : Name, aid: id }) => ({
id,
fields: {Name, sid}
})
)
})
);
// SystemA
const objArray1 = [
{ id: "1", name: "John" },
{ id: "2", name: "Jack" },
{ id: "3", name: "Sam" },
{ id: "4", name: "Bill" },
];
// SystemB
const objArray2 = [
{ id: "1", name: "John", aid:"uuud2905555" },
{ id: "3", name: "Sam", aid:"uuud29029303" },
{ id: "5", name: "Bob", aid:"uuud29435454" },
];
console.log('result as a JSON: ', createJSON(objArray1, objArray2));
.as-console-wrapper { max-height: 100% !important; top: 0 }
Explanation
Inline comments added to the snippet above.
EDIT
Use name and id from array-1. Used restOfArr1Props to account for all other props of array-1 objects to be included.
const createJSON = (arr1, arr2) => (
JSON.stringify({
records: arr1
.filter(
({ id }) => arr2.some(ob => ob.id === id)
)
.map(
({ id : sid, name : Name, ...restOfArr1Props }) => ({
id: arr2.find(a2 => a2.id === sid)?.aid ?? 'missing aid',
fields: {
Name, sid, ...restOfArr1Props
},
})
)
})
);
// SystemA
const objArray1 = [
{ id: "1", name: "John", prop1: 'value11', prop2: 'value12' },
{ id: "2", name: "Jack", prop1: 'value21', prop2: 'value22' },
{ id: "3", name: "Sam", prop1: 'value31', prop2: 'value32' },
{ id: "4", name: "Bill", prop1: 'value41', prop2: 'value42' },
];
// SystemB
const objArray2 = [
{ id: "1", name: "John", aid:"uuud2905555" },
{ id: "3", name: "Sam", aid:"uuud29029303" },
{ id: "5", name: "Bob", aid:"uuud29435454" },
];
console.log('result as a JSON: ', createJSON(objArray1, objArray2));
.as-console-wrapper { max-height: 100% !important; top: 0 }
const objArray1 = [
{ id: '1', name: 'John', type: 'bully' },
{ id: '2', name: 'Jack', type: 'sporty' },
{ id: '3', name: 'Sam', type: 'kind' },
{ id: '4', name: 'Bill', type: 'poliet' },
];
const objArray2 = [
{ id: '1', name: 'John', aid: 'uuud2905555' },
{ id: '3', name: 'Sam', aid: 'uuud29029303' },
{ id: '5', name: 'Bob', aid: 'uuud29435454' },
];
const syncedUsers = { records: [] };
for (let user1 of objArray1) {
const foundUser = objArray2.find(user2 => user2.id === user1.id);
if (foundUser) {
syncedUsers.records.push({
id: foundUser.aid,
fields: { sid: user1.id, name: user1.name, ...user1 },
});
}
}
console.log(JSON.stringify(syncedUsers));
Is there any way i can filter values which are present inside Object
[
{
id: "1",
name:"animal_image.jpg"
},
{
id: "2",
name:"fish_image.jpg"
},
{
id: "3",
name:"animal_doc.txt"
},{
id: "4",
name:"fish_doc.txt"
},
{
id: "4",
name:"flower_petals.jpg"
},
{
id: "5",
name:"plant_roots.jpg"
},
{
id: "6",
name:"human_image.jpg"
},
]
i want to filter all the name which contain_image.jpg so output look like this
output=
[ "human_image.jpg",
"anima_image.jpg",
"fish_image.jpg"
]
In this code snippet filtredData is an array of objects where the name includes _image.jpg and output is just an array of names containing _image.jpg
const data = [
{
id: "1",
name: "animal_image.jpg"
},
{
id: "2",
name: "fish_image.jpg"
},
{
id: "3",
name: "animal_doc.txt"
}, {
id: "4",
name: "fish_doc.txt"
},
{
id: "4",
name: "flower_petals.jpg"
},
{
id: "5",
name: "plant_roots.jpg"
},
{
id: "6",
name: "human_image.jpg"
},
]
const filtredData = data.filter(el => el.name.includes("_image.jpg"));
console.log(filtredData);
const output = filtredData.map(el => el.name);
console.log(output);
filter & map
const output = arr
.filter(x => x.name.endsWith('_image.jpg'))
.map(x => x.name);
With a API call i'm receiving a response like below
[
{
stationId: "10"
name: "Jinbaolai"
group: {id: "18", stationGroupName: "Ali"}
},
{
stationId: "13"
name: "Stack"
group: {id: "18", stationGroupName: "Ali"}
},
{
stationId: "20"
name: "Overflow"
group: {id: "19", stationGroupName: "Baba"}
}
]
As you can see first two records consist with the same group. I want to group these data according to the group. So for example it should look like this
[
{
groupId: "18",
groupName : "Ali",
stations : [
{
stationId: "10",
name: "Jinbaolai"
},
{
stationId: "13",
name: "Stack"
}
]
},
{
groupId: "19",
groupName : "Baba",
stations : [
{
stationId: "20",
name: "Overflow"
},
]
}
]
I want to do the grouping logic in my reducer where i also set the full data array that is shown in the beginning of the question.
case EVC_SUCCESS:
return {
...state,
chargingStations: action.evcData.chargingStations,
chargingStationGroups: //This is where my logic should go. ('action.evcData.chargingStations' is the initial data array)
tableLoading: false
}
How can i do this? I tried something using filter but not successful.
The best way to do this is to use Array.prototype.reduce()
Reduce is an aggregating function where you put in an array of something and get a single vaule back.
There may be a starting value as last parameter like I used {}.
The signature is reduce(fn, startingValue) where fn is a function taking two parameters aggregate and currentValue where you return the aggregate in the end.
const groupData = (data)=> {
return Object.values(data.reduce((group,n)=>{
if (!group[n.group.id]){
group[n.group.id] = {
groupId:n.group.id,
groupName: n.group.stationGroupName,
stations:[]}
}
group[n.group.id].stations.push({
stationID: n.stationId,
name: n.name
})
return group;
}, {}))
}
Here is the fiddle
A simple JS algorithm can do that for you
const list = [
{
stationId: "10",
name: "Jinbaolai",
group: {id: "18", stationGroupName: "Ali"}
},
{
stationId: "13",
name: "Stack",
group: {id: "18", stationGroupName: "Ali"}
},
{
stationId: "20",
name: "Overflow",
group: {id: "19", stationGroupName: "Baba"}
}
];
const groups = {};
list.forEach((item) => {
const groupId = item.group.id;
const group = groups[groupId] || {groupId: groupId, groupName: item.group.stationGroupName, stations: []};
group.stations.push({stationId: item.stationId, name: item.name});
groups[groupId] = group;
});
const groupedArray = Object.keys(groups).map((groupId) => groups[groupId]);
console.log(groupedArray); // This will be the output you want
I think chaining multiple functions will work.
const stations = [
{
"stationId": 10,
"name": "Jinbaolai",
"group": {"id": "18", "stationGroupName": "Ali"}
},
{
"stationId": 13,
"name": "Stack",
"group": {"id": 18, "stationGroupName": "Ali"}
},
{
"stationId": 20,
"name": "Overflow",
"group": {"id": "19", "stationGroupName": "Baba"}
}
]
const groups = _.chain(stations)
.groupBy((station) => { return station.group.id })
.map((values, key) => {
return {
"groupId": _.first(values).group.id,
"groupName": _.first(values).group.id,
"stations": _.map(values,(value)=>{ return { "stationId": value.stationId, "name": value.name } })
}
})
console.log("groups",groups)
<script src="https://cdn.jsdelivr.net/npm/lodash#4.17.15/lodash.min.js"></script>
I have two arrays of objects that contain similar values
data = [array1, array2]
array1 = [{hour: "565", age: "21", id: "1", naban: "sdfsd"}, {hour: "515", age: "25", id: "2", naban: "sf"}]
array2 = [{hour: "56454", age: "21", id: "1", too: "898"}, {hour: "8979", age: "25", id: "2", too: "234234"}, {hour: "65465", age: "27", id: "6", too: "123"}]
and I have an array of which values of those two object set will be used for merge
keys= ['id', 'id']
I want to merge those objects and create one array of objects shown below:
result = [{hour: "565", hour2: "56454", age: "21", age2: "21", id: "1", too: "898", naban: "sdfsd"}, {hour: "515", hour2: "8979", age: "25", age2: "25", id: "2", too: "234234", naban: "sf"}, {hour: "65465", age: "27", id: "6", too: "123"} ]
Criteria:
Id like to keep all the information that is not in the keys array eg. if you look at the result array you will see hour and hour2 values.
If keys don't match it will push the object as it is (eg. 3rd item in the result array)
This is what I did so far:
mergeOjects = (object, keys) => {
const sameKeys = Object.values(keys);
const data = Object.values(object);
if (data[0].length > data[1].length) {
const yarrak = data[0].map((item, i) => {
if (item[sameKeys[0]] === data[1][i][sameKeys[1]]) {
return Object.assign({}, item, data[1][i]);
}
return Object.assign({}, item);
});
console.log({ sameKeys, data, yarrak });
} else {
const yarrak = data[1].map((item, i) => {
if (data[0][i]) {
if (item[sameKeys[1]] === data[0][i][sameKeys[0]]) {
return Object.assign({}, item, data[0][i]);
}
}
return Object.assign({}, item);
});
console.log({ sameKeys, data, yarrak });
}};
it may need a bit of cleaning but I'm trying to get the logic work now, so sorry in advance.
I was able to complete the second criteria but it overwrites the hour value instead of storing separately as it is in the example
You could reduce the second array and take the wanted keys as common part for look up.
var array1 = [{ hour: "565", age: "21", id: "1", naban: "sdfsd" }, { hour: "515", age: "25", id: "2", naban: "sf" }],
array2 = [{ hour: "56454", age: "21", id: "1", too: "898" }, { hour: "8979", age: "25", id: "2", too: "234234" }, { hour: "65465", age: "27", id: "6", too: "123" }],
data = [array1, array2],
keys = ['id', 'id'],
merged = data[1].reduce((r, o) => {
var temp = r.find(q => o[keys[0]] === q[keys[1]]);
if (temp) {
Object
.entries(o)
.forEach(([k, v]) => {
if (keys.includes(k)) return;
temp[k in temp ? k + 2 : k] = v;
});
} else {
r.push({ ...o });
}
return r;
}, data[0]);
console.log(merged);
.as-console-wrapper { max-height: 100% !important; top: 0; }
I have no idea how I can sort an array of objects comparing two keys. I have array:
const arr = [
{
age: "20",
group: "XXX",
id: "3L1aa1558002753379",
menu: "standard",
name: "Adam"
},
{
age: "22",
group: "XXX",
id: "xhNt11558002753379",
menu: "standard",
name: "Ola"
},
{
otherid: "3L1aa1558002753379",
age: "25",
group: "YYY",
id: "6ryVK1558002753379",
menu: "standard",
name: "Wommman"
},
{
otherid: "xhNt11558002753379",
age: "25",
group: "YYY",
id: "aL1aa1558002753312",
menu: "standard",
name: "xxxxxy"
},
{
age: "25",
group: "YYY",
id: "6ryVK1558002753379",
menu: "standard",
name: "xxxxxo"
}
,
{
otherid: "1ryVK1558002753372",
age: "25",
group: "YYY",
id: "9ryVK155a002753370",
menu: "standard",
name: "xxxxxo"
},
{
age: "25",
group: "YYY",
id: "1ryVK1558002753372",
menu: "standard",
name: "xxxxxo"
}
];
I want to sort in this way: if "id" and "otherid" is the same - let objects be next to each other. I do not know how to do it, would anyone be so good?
Like here:
const arr = [
{
age: "20",
group: "XXX",
id: "3L1aa1558002753379",
menu: "standard",
name: "Adam"
},
{
otherid: "3L1aa1558002753379",
age: "25",
group: "YYY",
id: "6ryVK1558002753379",
menu: "standard",
name: "Wommman"
},
{
age: "22",
group: "XXX",
id: "xhNt11558002753379",
menu: "standard",
name: "Ola"
},
{
otherid: "xhNt11558002753379",
age: "25",
group: "YYY",
id: "aL1aa1558002753312",
menu: "standard",
name: "xxxxxy"
},
{
age: "25",
group: "YYY",
id: "1ryVK1558002753372",
menu: "standard",
name: "xxxxxo"
},
{
otherid: "1ryVK1558002753372",
age: "25",
group: "YYY",
id: "9ryVK155a002753370",
menu: "standard",
name: "xxxxxo"
},
{
age: "25",
group: "YYY",
id: "6ryVK1558002753379",
menu: "standard",
name: "xxxxxo"
}
,
];
I tried something similar to this: Javascript sort array by two fields but it failed
You pointed out, that you only need to compute pairs and render them in a react application.
It would make much more sense to structure your data in a way your view can directly render it.
Since you are in control of the data, you don't need to generate a flat list. You can setup the pairs (of students, or whatever) using a hierarchical structure, or nested obejcts.
let students = [{name: 'Jon', id:0}, {name: 'Peter', id: 1}, {name: 'Steve', id:2}, {name: 'Joe', id: 3}]
let pairs = [{a: students [3], b: students[1]}, {a: students [2], b: students [0]}];
console.log (pairs);
Now if you want to render those pairs, you already have the data in the structure you need.
render () {
return pairs.map (pair => <Pair data={pair} />)
}
You can also flatten the pairs array and render a flat list of elements next to each other if you prefer.
let students = [{name: 'Jon', id:0}, {name: 'Peter', id: 1}, {name: 'Steve', id:2}, {name: 'Joe', id: 3}]
let pairs = [{a: students [3], b: students[1]}, {a: students [0], b: students [2]}];
const flatten = (flat, {a, b}) => [...flat, a, b];
const sorted = pairs.reduce (flatten, []);
console.log (sorted)
const Student = data => <div>{data.name}</div>
const Pair = pair => <div>
<Student data={pair.a} />
<Student data={pair.b} />
</div>
const renderFlat = () => {
return sorted.map (student => <Student data={student} />
}
const renderPairs = () => {
reutnr pairs.map (pair => <Pair data={pair} />)
}
I hope I make at least a bit sense. - Here is the sort function in any case
function sort (arr) {
let otherids = arr.reduce ((lkp, obj) => {
if (obj.otherid)
lkp [obj.otherid] = obj;
return lkp;
}, {});
let sorted = [];
for (var i=0; i < arr.length; i++) {
let obj = arr [i];
if (!!~sorted.indexOf (obj)) continue;
if (otherids [obj.id]) {
sorted.push (obj)
sorted.push(otherids[obj.id])
}
}
return sorted.concat (arr.filter (obj => !~sorted.indexOf (obj)));
}
let sorted = sort (arr);
console.log (sorted);
<script>var arr=[{age:"20",group:"XXX",id:"3L1aa1558002753379",menu:"standard",name:"Adam"},{age:"22",group:"XXX",id:"xhNt11558002753379",menu:"standard",name:"Ola"},{otherid:"3L1aa1558002753379",age:"25",group:"YYY",id:"6ryVK1558002753379",menu:"standard",name:"Wommman"},{otherid:"xhNt11558002753379",age:"25",group:"YYY",id:"aL1aa1558002753312",menu:"standard",name:"xxxxxy"},{age:"25",group:"YYY",id:"6ryVK1558002753379",menu:"standard",name:"xxxxxo"},{otherid:"1ryVK1558002753372",age:"25",group:"YYY",id:"9ryVK155a002753370",
menu:"standard",name:"xxxxxo"},{age:"25",group:"YYY",id:"1ryVK1558002753372",menu:"standard",name:"xxxxxo"}];</script>
The key to sorting strings is to use String.localeCompare(). Numbers, dates and booleans are much simpler.
Here is an example of sorting a list of Objects by two string columns - name and menu:
arr.sort(function comparerFn(L, R){
if(L.name !== R.name)
return (new String(L.name)).localeCompare(R.name)===1?1:-1
if(L.menu !== R.menu)
return (new String(L.menu)).localeCompare(R.menu)===1?1:-1
return 0
})
Reasoning for odd ===1?1:-1 syntax: localeCompare() returns 1 or 0 but sort compareFn requires either 0: (leave sorting as-is), >0: (L is before R), <0: (R is before L)