Javascript/JQuery - Sort by split part of array? - javascript

I want to sort an array by a split part of an array.
example_array = ["Zebra:Add","Pay:Cold","And:Vets","Jam:Back"]
I want to so it sorts it like this:
console.log(code here) // prints ["Zebra:Add","Jam:Back","Pay:Cold","And:Vets"]
Note: I want "Zebra:Add","Pay:Cold", etc to stay together. I just want it be sorted by the text after the ":".

From your comment on the question:
I can't even think of a solution
Break the problem into smaller pieces. You want to sort an array by a part of the strings in the array, so you need to figure out / look into
How to sort an array (you've done that, you've found the sort method)
How to isolate the part of the string you want to sort on
How to correctly compare strings for Array#sort
How to do #2 and #3 within the context of doing #1
Re #2, there are various ways to do that. You could find the : via String#indexOf and then use substring to get all characters after it. You could split the string on :, then use the second half (if you know there won't be more than one : in the string). Or you could use a regular expression to isolate everything after the first :.
For instance, someString.match(/:.*$/)[0] isolates all characters starting with the first :. (Including the : is harmless, but you could use .substring(1) if you don't want to include it.)
Re #3: Array#sort expects its callback to return a negative number if the first argument should come before the second, 0 if their order doesn't matter, or a positive number if the second should come before the first. String#localeCompare compares strings according to the current locale and returns exactly that information, so we want to use that.
Re #4: Array#sort accepts a callback function, so you could do all the string splitting and comparison in that callback. But since the callback will be called repeatedly, frequently with either the first or second argument being one that's already been checked before, for larger arrays doing it then may be inefficient. It may make more sense to do all the string splitting / isolation in advance, then do the sort, then get your desired result.
So:
The not-particularly-efficient way (which is fine for data sets like your small array) is to isolate the part you want to sort on within the sort callback:
var array = ["Zebra:Add","Pay:Cold","And:Vets","Jam:Back"];
array.sort(function(left, right) {
return left.match(/:.*$/)[0].localeCompare(right.match(/:.*$/)[0]);
});
var array = ["Zebra:Add","Pay:Cold","And:Vets","Jam:Back"];
array.sort(function(left, right) {
return left.match(/:.*$/)[0].localeCompare(right.match(/:.*$/)[0]);
});
console.log(array);
With ES2015+ syntax:
const array = ["Zebra:Add","Pay:Cold","And:Vets","Jam:Back"];
array.sort((left, right) =>
left.match(/:.*$/)[0].localeCompare(right.match(/:.*$/)[0])
);
const array = ["Zebra:Add","Pay:Cold","And:Vets","Jam:Back"];
array.sort((left, right) =>
left.match(/:.*$/)[0].localeCompare(right.match(/:.*$/)[0])
);
console.log(array);
If it's a massive array where doing those splits on every compare is problematic, you could map first, then sort, then unmap:
var array = /*...really big array...*/;
array =
array.map(function(entry) { return {full: entry, key: entry.match(/:.*$/)[0]};})
.sort(function(left, right) { return left.key.localeCompare(right.key); })
.map(function(entry) { return entry.full; });
var array = ["Zebra:Add","Pay:Cold","And:Vets","Jam:Back"];
array =
array.map(function(entry) { return {full: entry, key: entry.match(/:.*$/)[0]};})
.sort(function(left, right) { return left.key.localeCompare(right.key); })
.map(function(entry) { return entry.full; });
console.log(array);
With ES2015+ syntax:
let array = /*...really big array...*/;
array =
array.map(entry => ({full: entry, key: entry.match(/:.*$/)[0] }))
.sort((left, right) => left.key.localeCompare(right.key))
.map(entry => entry.full);
let array = ["Zebra:Add","Pay:Cold","And:Vets","Jam:Back"];
array =
array.map(entry => ({full: entry, key: entry.match(/:.*$/)[0] }))
.sort((left, right) => left.key.localeCompare(right.key))
.map(entry => entry.full);
console.log(array);

I like the simplicity of the previous answer, in comparison My approach is probably too wordy! But here goes...
1.) take the original array and build a new sorting array from it, JSON array with each object having a text1 and text2 value... we'll sort on the text 2 value
2.) run a sort based on the text2 value
3.) empty the original array
4.) loop over the sorting array and re-populate the original array
heres a fiddle example I threw together
// STARTING ARRAY. WE WANT TO SORT BY THE TEXT AFTER THE COLON
example_array = ["Zebra:Add", "Pay:Cold", "And:Vets", "Jam:Back"];
// AN EMPTY ARRAY TO BUILD A JSON ARRAY FROM, THE SORT FROM THE DESIRED TEXT STRING
sorting_array = [];
// LOOP THROUGH THE ORIGINAL ARRAY AND PUSH A NEW OBJECT TO THE SORTING ARRAY
// EACH OBJECT CONTAINS A TEXT1 VALUE AND A TEXT2 VALUE
$.each(example_array, function(i, val){
sorting_array.push({"text1": val.split(':')[0], "text2": val.split(':')[1]})
})
// SORT THE SORTING ARRAY BY THE TEXT2 VALUE
sorting_array.sort(function(a, b){
if (a.text2 < b.text2) return -1;
if (b.text2 < a.text2) return 1;
return 0;
});
// EMPTY OUR ORIGINAL ARRAY
example_array = [];
// FOR DEMO PURPOSES LETS DISPLAY EACH IN THE DOM IN A UL ,
// AND ALSO RE-POPULATE THE ORIGINAL ARRAY WITHT HE NEW ORDER
$.each(sorting_array, function(i, val){
example_array.push(val.text1+':'+val.text2)
})
// TO SHOW THE NEW ORDER, LETS LOOP BACK OVER THE EXAMPLE_ARRAY
$.each(example_array, function(i, val){
$('ul').append('<li>' + val+ '</li>');
})

Related

Javascript array filtering and mapping

I keep asking the same question in terms of react and not getting a clear answer, so ive decided to attempt to extrapolate conceptually what i want to do and see if i cant get some answers on how i can proceed in react.
filters= ["Bill Johnson", "hasStartDocs"]
mappedArray =
[
{
name:'Larry',
docs:{
startDocs:[{...}]
},
workers:{
sales:["Bill Johnson"]
}
]
So if filter[i] has a space{' '} check all arrays under workers for strings like filter[i] and then map
filteredMappedArray based on that
if filter[i] does not have a space create a new string slicing the first 3 chars of the string making the first letter of that new string lower case (thatString = "startDocs") eval(resoStatus.${thatString}.length > 0) then map filteredMappedArray like that.
so after that for every instance of [i] you would have a unique map. so if someone clicked 5 filters there would be a filteredMappedArray for each which i guess you would .concat() and .reduce() if they have the same _id.
I dont need someone to help with the string manipulation. I need a nudge in the right direction on how to utilize both filters [] and mappedArray [] to create 1 filteredMappedArray. please and thank you.
for(i=0,i<filters.length,i++){
filters.map(filter => filter.includes(' ') //map mappedArray based on rules above)
filters.map(filter => filter.includes(/^has/ //map mappedArray based on rules above)
}
this gives you
[filteredMappedArray1]
[filteredMappedArray2]
bigArray = filteredMappedArray1.concat(filteredMappedArray2)
smallArray = bigArray.forEach(map //if the map is unique delete it if the map isnt unique keep it but remove all the duplicates)
As best as I can make out, you aren't doing any mapping, just filtering the mappedArray to limit it to entries that match at least one filter in filters.
If so, here's how to do that (see comments) provided you don't have lots more filters than you have entries in mappedArray (if you did, you'd structure it differently, but that seems unlikely to me):
// The `length` check prevents filtering if there are no filters; that's usually how people
// implement filters, but remove it if that's not right in your case
const filteredArray = filters.length === 0 ? mappedArray : mappedArray.filter(entry => {
// `some` returns `true` if the callback returns a truthy value (and
// stops loopihng); it returns `false` if it reaches the end of the
// array without the callback rturning a truthy value. So basically
// this is saying "return true if any filter matches."
return filters.some(filter => {
if (filter.includes(" ")) {
// Check `workers` arrays
for (const array of Object.values(entry.workers)) {
if (array.includes(filter)) {
return true;
}
}
} else {
// Check `docs` for at least one entry for the given type
const key = /*...strip leading three, change case of fourth...*/;
const array = entry.docs.key];
if (array && array.length > 0) { // There's at least one entry
return true;
}
}
return false;
});
});

compare two array values (if contains) and get difference

How to compare two array values and get the difference.
const list1 = ['1xx', '2bbb', '3ggg', '4eee'];
const list2 = ['1xx33', '2333', '3gfffgg', '4eeeooo'];
I'd like to check if list2 values contains list1s
so 1xx33 contains 1xx and 4eeeooo contains 4eee then the result I respect to see is ['2bbb', '3ggg'];
const output = list1.filter( function(n) { return !this.has(n) }, new Set(list2) );
Above snippet only gives matches but not contains
For every entry in the first list, you must verify if there is no matching substring in any of the values in the second list.
const output = list1.filter(s => list2.every(b => (b.indexOf(s)===-1)));
This snippet creates a new list by filtering the first list, removing every entry that has at least one matching substring when compared to the other list.
If you're not familiar with arrow functions (=>), here's the alternative:
const output = list1.filter(function(s) { return list2.every(function(b) { return (b.indexOf(s)===-1) })});

Javascript Split strings on commas inside an array and remove duplicates while ignoring case sensitivity on the resulting array

I have a javascript array that looks like this:
["polyester", "cotton", "Polyester, Nylon", "Cotton, Acrylic", "Polyester, fiber", "nylon, Leather"]
I would like to mutate this array into this:
["polyester", "cotton", "Nylon", "Acrylic", "fiber", "Leather"]
That is split the strings with commas inside the array and then remove the duplicates while ignoring the case sensitivity.
I have looked at other questions on SO. They either explain how to remove duplicates from an array or how to split a single string on commas and not many strings inside an array. I have tried to solve it by:
mutated = a.filter(function(item, pos) {
return a.indexOf(item) == pos;
})
but this does not split the comma seperated strings with in the array. I am seeking for a solution that will do both splitting and removing duplicates while ignoring case sensitivity.
Here's a simple solution. It does not preserve the original upper case items, but I don't see a reason to do that, since it's based only on the order in the original array.
// we join the original items to a long string, then split it up
var items = original.join (',').split (/\s*,\s*/);
// we make all items lowercase uniformly
items = items.map (function (item) {
return item.toLowerCase ();
});
// we put new items in a unique list
var uniqueItems = [];
items.forEach (function (item) {
if (uniqueItems.indexOf (item) < 0) {
uniqueItems.push (item);
}
});

Adding Characters to the Begining of an Array that form words

When looking at set of characters I am trying to put each letter into a specifc order in an array. For Example: Given the Strings "cat" and "dog" I would want an array that contains [d,o,g,c,a,t], cat at the end of the array because it was read first.
Currently I have tried this:
However, when I try the code below assuming the strings are "cat" and "dog".
I get an array containing: [c,a,t,d,o,g]. Instead of push I have also tried .unshift but the array now reads: [g,o,d,t,a,c].
var chars = /^[a-z]$/;
var string = [];
function makeword(){
if(currentChar.match(chars)){
string.push(currentChar);
currentChar = getNextChar(); //Gets next Character in the String
makeword();
}
}
Is something like this possible in Javascript?
If I understood you correctly, you want to provide a list of strings, then have them show up in an array in reverse order, with each letter as an element of the array. The following function will do just that:
function makeWords() {
var arr = [];
for(var i = arguments.length - 1; i >=0; i--) {
arr.push(arguments[i]);
}
return arr.join('').split('');
}
so running makeWords('cat', 'dog') will result in ['d','o','g','c','a','t'].
It's a relatively simple code when a functional approach is used. The rest and spread operators are very handy both to collect the function arguments and to spread the characters of a word into an array.
var characterify = (...c) => c.reduceRight((a,b) => a.concat([...b]) ,[]);
document.write("<pre>" + JSON.stringify(characterify("cat","dog")) + "</pre>");

Merge array into a single array

If this were .NET, I'd ask how to convert List<List<MyClass> to List<MyClass>. However, I'm not very good with javascript and don't know how to ask that as a question using Javascript terminology!
My javascript object comes through like
And is created as:
js_datasets.push({
"DataItem0": {
lzabel: "This",
data: [[1408710276000, null],[1408710276000, 15]]
},
"DataItem1": {
lzabel: "That",
data: [[1408710276000, null],[1408710276000, 15]]
},
});
js_datasets.push({
"DataItem22": {
lzabel: "And other",
data: [[1408710276000, null],[1408710276000, 5]]
},
"DataItem23": {
lzabel: "And lastly",
data: [[1408710276000, null],[1408710276000, 1]]
},
});
Each object is the same "type" (if it matters).
I'd like to create a single list but I am failing to do so. My efforts are
var myDataSet = []; //this is the results of what I want, ideally as a single list
for (var i = 0; i < js_datasets.length; i++) {
if (i==0) {
myDataSet.push(js_datasets[i]);
}
else {
myDataSet.concat(js_datasets[i]);//does nothing
myDataSet.join(js_datasets[i]);//does nothing
}
...more logic
As you can see with the above, I've tried using push, concat and join.
If I update the code to only use push (and never use concat and join) then I get all the values I want, but again, as an array within an array.
Using concat and join do not add to the list.
So, if we can assume the 12 items in the array (pictured) all contain 10 items, I'd like to have a single list of the 120 items!
How can I simply convert this multidimension array (is it multidimension) to a single dimension array.
This will be a bit complicated, as the items in your Array js_datasets are not Arrays, but a more generic Object. This means you can't assume the keys will be in order if you try to read them
Lets write some helper functions to account for this;
function dataItemCollectionToArray(o) {
var keys = Object.keys(o);
// assuming no non-DataItem keys, so next line commented out
// keys = keys.filter(function (e) {return e.indexOf("DataItem") === 0;});
keys.sort(function (a, b) { // ensure you will get the desired order
return +a.slice(8) - +b.slice(8);
});
return keys.map(function (e) {return o[e];});
}
Now you can loop over js_datasets performing this conversion
var myDataSet = [], i;
for (i = 0; i < js_datasets.length; ++i) {
// assuming no gaps, if you need to add gaps, also find min, max indices
// in `dataItemCollectionToArray`, and check them in each iteration here
myDataSet.push.apply(myDataSet, dataItemCollectionToArray(js_datasets[i]));
}
Please note that Object.keys and Array.prototype.map may require polifills if you wish to support old browsers, i.e. IE<=8
An easier solution however, may be to re-write how js_datasets is constructed so that the Objects you are pushing are more Array-like or indeed pushing true Arrays, perhaps with a couple extra properties so you know the offset for the first index. This would mean you can use flatten methods that you'll find around the internet

Categories