Sort arrays, variables or objects in Javascript - javascript

Im new to javascript but I have already made some scripts that really make a difference in my workflow. However I am now embarking on a project that forces me to sort data in a way I dont know howto do in Javascript. I will try to explain what I need to do as if my data was in excel but it isnt, I have only been able to put the data in 4 different arrays:
pagenumber[1,2,3,4,5] //only numbers
zipcode[77889,99887,33667,11122,44559] // only numbers
streetname[Hillroad, Hillroad, Baghdad Street, Hongway, Chinatown] //only letters
roadnumber[55,27,1,13,16] //only numbers
I would like to sort them like this, first by the zipcode, then by the roadname, then by the even roadnumbers descending, then by the odd roadnumbers ascending.
According to this new sorting I want to generate a new pagenumber but I want it to somehow relate to the (old) variable "pagenumber" so I can locate the old page and extract it to a new document with new pagenumbers. I am not asking you guys to write all the code for me but I need a little bit of advice to know firstly if it is possible to do which I think it is, secondly if it is right of me to put the data in four different arrays, thirdly if ther is any (ofcourse) smarter way to save the data so they relate to eachother more closely. Give me your thoughts. Also tips of where and what I should read is appreciated. Thank you all for the answers. However I want to point out that I write my code in Acrobat DC not for the web.

I suppose the items in your arrays are tied. So you should use [{},{},{},{},{}] instead of 4 arrays.
var items = [{pagenumber:1,zipcode:77889,streetname:Hillroad,roadnumber:55},{...},{...},{...},{...}]
Then sort each key-value property one-by-one, like below:
var x= [ {a:2,b:2,c:3}, {a:1,b:1,c:1}, {a:1,b:2,c:3}, {a:2,b:2,c:2} ];
x.sort(function(item1, item2){
var sort_a = item1.a-item2.a;
if (sort_a) return sort_a;
var sort_b = item1.b-item2.b;
if (sort_b) return sort_b;
var sort_c = item1.c-item2.c;
if (sort_c) return sort_c;
})
Or simplify it to be
x.sort(function(item1, item2){
return (item1.a-item2.a) || (item1.b-item2.b) || (item1.c-item2.c);
})

Given the data:
var pagenumber=[1,2,3,4,5]; //only numbers
var zipcode=[77889,99887,33667,11122,44559]; // only numbers
var streetname=['Hillroad', 'Hillroad', 'Baghdad Street', 'Hongway', 'Chinatown']; //only letters
var roadnumber=[55,27,1,13,16]; //only numbers
First, you need to make your data more easily manageable
var data = pagenumber.map(function(itemValue, index) {
return {
pagenumber:itemValue, // == pagenumber[index]
zipcode:zipcode[index],
streetname:streetname[index],
roadnumber:roadnumber[index]
};
});
Then sort it
data.sort(function(a, b) {
if (a.zipzode != b.zipcode) {
// numeric
return a.zipcode - b.zipcode;
}
if (a.streetname != b.streetname) {
// alpha
return a.streetname < b.streetname ? -1 : a.streetname > b.streetname ? 1 : 0;
}
if (a.roadnumber % 2 != b.roadnumber % 2) {
// even before odd
return b.roadnumber % 2 - a.roadnumber % 2;
}
// numeric
return a.roadnumber - b.roadnumber;
});
borrowing from another answer, that can be simplified to
data.sort(function(a, b) {
return (a.zipcode - b.zipcode) || (a.streetname < b.streetname ? -1 : a.streetname > b.streetname ? 1 : 0) || (b.roadnumber % 2 - a.roadnumber % 2) || (a.roadnumber - b.roadnumber);
});
Personally, I don't use the intermediate step when I can avoid it ... so the following is equivalent to bot the map and sort in one chained command
var sortedData = pagenumber.map(function(itemValue, index) {
return {
pagenumber:itemValue,
zipcode:zipcode[index],
streetname:streetname[index],
roadnumber:roadnumber[index]
};
}).sort(function(a, b) {
return (a.zipcode - b.zipcode) || (a.streetname < b.streetname ? -1 : a.streetname > b.streetname ? 1 : 0) || (b.roadnumber % 2 - a.roadnumber % 2) || (a.roadnumber - b.roadnumber);
});

// sorting zipcode in ascending order
zipcode.sort();
// sorting streetname in ascending order
streetname.sort();
// fetching evenroad numbers
var roadnumbereven=roadnumber.filter(function(element, index, array) {
return (element % 2 === 0);
});
// fetching odd roadnumbers
var roadnumberodd = roadnumber.filter(function(element, index, array) {
return (element % 2 !== 0);
});
// sorting even road numbers in ascending order
roadnumbereven.sort();
// sorting odd road numbers in descending order
roadnumberodd.sort(function(a,b){ return b-a; });
// merging roadnumbers(even/odd)
roadnumber = roadnumbereven.concat(roadnumberodd);
console.log(roadnumber);

Related

Sorting array coming from computed property, in a method also sorts the original array (that comes from the computed property)

Im building a vue application for quizzes, I want to display the all the previous results of the person that has taken the quiz. For that I fetch the results from my backend and then pass them to the "view" component with a computed property:
computed: {
allResults() {
return this.$store.state.allResults;
},
I want to also sort out the best results, and the most recent results and display them separately, In order to do that I have the following methods:
bestResults() {
let orderedArray = this.allResults;
orderedArray.sort((a, b) =>
a.score < b.score ? 1 : a.score > b.score ? -1 : 0
);
let half = Math.round(orderedArray.length / 2);
let bestResults = orderedArray.slice(0, half);
return bestResults;
},
recentResults() {
let recentResults = this.allResults.slice(0, 5);
return recentResults;
}
This works, however it sorts the allResults array in a way that shows the scores from highest to lowest, which is what I do in the bestResults() function. This is a problem since I want to display the recentResults based on date, which should show the most recent result on top.
Well, you first sort the array in bestResults(), then use the sorted array in recentResults.
As a solution, you can create a new array with the same elements and sort that, which will leave the original array untouched:
bestResults() {
let orderedArray = [...this.allResults];
orderedArray.sort((a, b) =>
a.score < b.score ? 1 : a.score > b.score ? -1 : 0
);
let half = Math.round(orderedArray.length / 2);
let bestResults = orderedArray.slice(0, half);
return bestResults;
},
recentResults() {
let recentResults = this.allResults.slice(0, 5);
return recentResults;
}

Multiple Filter Methods

I'm trying to solve this problem.
I'm creating a filter method, that has to return me a filtered array based on my preference.
The array is containing some sports bet info, like the odd quote, the starting date, the name of the bookmaker, etc, and I'm trying (for the moment) to just filter based on the min and max odds
First of all, into my "Parent" react component, I receive some info from his child, and those info are stored in an object.
The object is like that:
filters = {minOdd: "", maxOdds:"", ecc...}
And the filter method is like:
setFilters = () => {
const odds = this.state.odds
const filters = this.state.filters
const newOdds = odds.filter((odd) => odd.quota > filters.quotaMin)
.filter((odd) => odd.quota < filters.quotaMax)
}
Where "quota" means "odd", quotaMin means "min odd" and "quotaMax" means max odd
Now, if I set the min and the max odd into my child component, the function returns me an array containing all the right odds. But if I set just one of the 2 filters, this function returns me back an empty object.
I'n my opinion, the problem is that if i don't set one of the 2 value, the filter method compares the odd this a value that is like modd.quota < filters.quotaMax, where filters.quotaMax could be = to "".
Soo i have to not allow the filter method to filter value that are = to "".
If someone can give my an advice!
Thanks in advice!
Use fallback values for the undefined filters.
If either quotaMax or quotaMin is not defined, you are (most likely, haven't seen the structure of a bet) comparing a Number against undefined, which always results in false:
1 < undefined; // -> false
1 > undefined; // -> false
As fallback values, you can use negative and positive infinity. To be honest, it doesn't matter which values you use as long as the fallback for quotaMin is guaranteed to be smaller than the lowest quota and the fallback for quotaMax is guaranteed to be higher than the highest quota.
const newOdds = odds
.filter(odd => odd.quota > (filters.quotaMin || -Infinity))
.filter(odd => odd.quota < (filters.quotaMax || Infinity));
Side note:
You can make your code run faster by merging both predicates into one with AND && (saves one iteraton/filtering).
const newOdds = odds
.filter(odd => odd.quota > (filters.quotaMin || -Infinity) &&
odd.quota < (filters.quotaMax || Infinity));
I guess you just need to handle that case then where quotaMax is undefined/"":
const newOdds = odds.filter((odd) => odd.quota > filters.quotaMin)
.filter((odd) => {
if (filters.quotaMax) {
return odd.quota < filters.quotaMax
} else {
// you decide what should happen in this case..
// return true/false
})

How to sort array by object property with multiple conditions in Javascript

I've been reading similar solved problems but couldn't understand how to apply it in my case.
So, I have an unsorted array of objects:
const queues = [
{"floor":2,"direction":"REQUEST_FLOOR"},
{"floor":1,"direction":"REQUEST_FLOOR"},
{"floor":5,"direction":"CALL_DOWN"},
{"floor":8,"direction":"CALL_DOWN"},
{"floor":7,"direction":"REQUEST_FLOOR"},
{"floor":6,"direction":"CALL_DOWN"}
];
I'd like to sort it into:
const queues = [
{"floor":1,"direction":"REQUEST_FLOOR"},
{"floor":2,"direction":"REQUEST_FLOOR"},
{"floor":7,"direction":"REQUEST_FLOOR"},
{"floor":8,"direction":"CALL_DOWN"},
{"floor":6,"direction":"CALL_DOWN"},
{"floor":5,"direction":"CALL_DOWN"},
];
So, the priority rules I want to apply are :
Sort "REQUEST_FLOOR" first then only "CALL_DOWN".
Sort "REQUEST_FLOOR" in ascending and "CALL_DOWN" in descending.
I'm able to make it work by separating it into 2 different arrays, sort, then combine it at the end. Here is my code:
const requestFloors = queues.filter(queue => queue.direction === "REQUEST_FLOOR");
const callDownFloors = queues.filter(queue => queue.direction === "CALL_DOWN");
requestFloors.sort((a,b) => a.floor - b.floor);
callDownFloors.sort((a,b) => b.floor - a.floor);
const newQueues = [...requestFloors,...callDownFloors];
Question: Instead of filtering + sorting, I'd like to just use sort(), so maybe something like this:
queues.sort((a,b) => b.direction.localeCompare(a.direction) || a.floor - b.floor );
However, this code sort the the direction correctly, but the problem is it still sorts the floor in ascending for both direction.
How do I achieve the same result by only using sort()? Any helps will be greatly appreciated.
You can use the sort function:
queues.sort((el1, el2) => {
if(el1.direction == el2.direction){
if(el1.direction === "REQUEST_FLOOR")
return el1.floor - el2.floor
else
return el2.floor - el1.floor
}
else if(el1.direction === "REQUEST_FLOOR")
return -1;
else
return 1;
})
Output:
[
{
"floor":1,
"direction":"REQUEST_FLOOR"
},
{
"floor":2,
"direction":"REQUEST_FLOOR"
},
{
"floor":7,
"direction":"REQUEST_FLOOR"
},
{
"floor":8,
"direction":"CALL_DOWN"
},
{
"floor":6,
"direction":"CALL_DOWN"
},
{
"floor":5,
"direction":"CALL_DOWN"
}
]
If the direction is the same in both compared items, you can conditionally choose the evaluation of the other columns based on the direction:
queues.sort((a,b) =>
(a.direction=="CALL_DOWN") - (b.direction=="CALL_DOWN") ||
(a.direction == "CALL_DOWN"
? b.floor - a.floor
: a.floor - b.floor)
);

Creating series from series in d3

I have data of this form (simplified, but assume 20 columns between Admin and Mining):
Date,Series,Admin,Mining,CPI
1990,Ordinary Time Earnings,20,30,96
1991,Ordinary Time Earnings,22,33,100
1990,Total Earnings,25,38,96
1991,Total Earnings,29,43,100
Which I separate out into two series like this:
d3.csv("avgearnings_v1_1.csv", function(error, data) {
if (error) throw error;
OrdinaryTimeEarnings = data
.filter(function(d) {
if(d.Series == 'Ordinary Time Earnings')
return d;
});
TotalEarnings = data
.filter(function(d) {
if(d.Series == "Total Earnings")
return d;
});
And can get that to display on a graph without any issue. What I want to do next is create two more series:
OrdinaryTimeEarningsReal = OrdinaryTimeEarnings;
TotalEarningsReal = TotalEarnings;
And then recalculate those new series. Basically:
For any column that is not Date/Series/CPI
Take the CPI value for that year
Individually divide each of the Mining-Admin columns by the CPI and multiply by 100.
So: New Value = ([Old Value]/[CPI])*100
My code is terrible but I can get the correct values using this:
OrdinaryTimeEarningsReal
.forEach(function (z,i) {
var CPI = z["CPI"];
d3.map(z, function(b) {return b;})
.forEach(function (c) {
if(c !== "Date" && c !== "Series" && c !== "CPI" )
OrdinaryTimeEarningsReal[i][c] = ((z[c])/(CPI))*100;
});
});
But, when I do this it is somehow also updating the original OrdinaryTimeEarnings series, such that they equal each other and the original data in OrdinaryTimeEarnings is lost.
I'm not sure whether it's the fact I'm using the bare object (while iterating within it, eek!) or that the code above is actually changing the values in the original data object (and all 4 of the series I've created after are just references to it).
Either way, I can't work it out! I've tried a fair few different syntax forms but can't work it out. Help would be greatly appreciated to achieve this.
If you indeed use this code to "duplicate" your arrays:
OrdinaryTimeEarningsReal = OrdinaryTimeEarnings;
TotalEarningsReal = TotalEarnings;
then you mentioned it right, when you said that they reference the same object. In JavaScript, arrays are mutable, and using the code above you just created 2 new variables with a reference to the existing array in the memory.
In order to deep clone your array of objects, use this method:
OrdinaryTimeEarningsReal = JSON.parse(JSON.stringify(OrdinaryTimeEarnings));
TotalEarningsReal = JSON.parse(JSON.stringify(TotalEarnings));
This will create duplicates of the array and assign them to the new variables, so that when you'll edit them, the initial arrays will remain unaffected.
Now, regarding your code, it's a bit too complex. If I understood correctly what are you trying to achieve, you could simplify it as follows:
OrdinaryTimeEarningsReal
.forEach(function (z,i) {
for (var c in z) {
if (z.hasOwnProperty(c) && c !== "Date" && c !== "Series" && c !== "CPI" )
z[c] = z[c] / z.CPI * 100;
});
});
Good luck!
If I understand correctly :
data.forEach(function(d) {
for (var key in d) {
if (key !== 'Date' && key !== 'Series' && key !== 'CPI') {
d['new' + key] = (d[key] / d.CPI) * 100;
}
}
})
console.log(data)
I have added new onto the new attributes so the new admin value is newAdmin
Implemented fiddle : https://jsfiddle.net/thatOneGuy/9ywLytjf/

ReactJS using .sort() method mixing up results in array

I have an array of data that queries the results through a prop. I am able to obtain the data but, unable to sort it. I want all the data with MyTeam to appear first.
However, when I load this into the browser I obtain different results.
In Safari the data lists MyTeam to be the second element in the array
In Chrome, the data lists MyTeam to be the third element but, whenever I interact with them (via an onClick method) the data swaps around in a different order.
If I don't have the .sort() method, everything remains the same and nothing changes.
Is there a proper way to sort the array?
var gameList = this.props.data.sort(function(game) {
return (game.homeTeam == 'MyTeam' || game.awayTeam == 'MyTeam') ? 0 : 1;
}).map(function(game, i) {
//console.log(game.homeTeam + ' ' + game.awayTeam);
});
Array#sort compares TWO items of the array. Your compare function must have two arguments. I suggest the following:
var gameList = this.props.data.sort(function(a, b) {
var matchA = a.homeTeam === 'MyTeam' || a.awayTeam === 'MyTeam';
var matchB = b.homeTeam === 'MyTeam' || b.awayTeam === 'MyTeam';
// This will return
// -1 if matchA is true and matchB is false
// 0 if matchA and matchB are both true or both false
// 1 if matchA is false and matchB is true
return (matchB ? 1 : 0) - (matchA ? 1 : 0);
});

Categories