Introduction
In my last post, I have demonstrated - How to get unique items or values from an Array using JQuery.
In this post, I will demonstrate how to get unique values from multidimensional array using JQuery.
Prerequisites
- CDN Reference of JQuery library which will be used in our JQuery script - JQuery CDN latest Stable Versions can be found here https://code.jquery.com/
- Knowledge of Javascript/JQuery Arrays - To learn or know more about Arrays, please see this site http://www.w3schools.com/js/js_arrays.asp
Let’s get started!
Before we filter the unique content from multidimensional array, let’s create the one first.
Below I have created a multidimensional array in a variable called “employee” which has two properties as “name” and “age”.
var employee = [{ "name": "Joe", "age": 25 }, // Line number 1
{ "name": "Ron", "age": 24 }, // Line number 2
{ "name": "Ken", "age": 32 }, // Line number 3
{ "name": "Dan", "age": 30 }, // Line number 4
{ "name": "Joe", "age": 25 }, // Line number 5
{ "name": "Tom", "age": 22 }, // Line number 6
{ "name": "Iva", "age": 36 }, // Line number 7
{ "name": "Joe", "age": 25 }]; // Line number 8
In the above code, if we notice, “employee” variable has “name” property “Joe” and “age” property “25” multiple times. In other words, records with the name “Joe” are duplicating.
To be precise, its occurrence in above array is thrice i.e. on line number 1, on line number 5 and on line number 8.
How to get rid of it and show records without dupes?
To get records without any duplication, let’s add some more code as:
var dupes = [];
var uniqueEmployees = [];
In above lines of code, we have created two more empty arrays. One will act like subordinate and other will store the unique values.
Now, we will use JQuery each function to iterate through “employee” variable to get all the records from it and then check duplicates. If no duplicates are found, we will store that in “uniqueEmployees” array.
$.each(employee, function (index, entry) {
if (!dupes[entry.name]) {
dupes[entry.name] = true;
uniqueEmployees.push(entry);
}
});
So, in the above code, we can see the logic to loop through “employee” array and check the name in subordinate array. If nothing is found then insert the record in “uniqueEmployees” array and make dupes entry as true.
Once done, now, we can check what is it inside the “uniqueEmployees” array by using console.log() function as below:
console.log(uniqueEmployees);
This will display the output in our browser console as below:
We can see in above screenshot that we didn’t get repeating records for “Joe”.
We can also see the result in a string by alerting the string using below code:
var toDisplayText = "";
$.each(uniqueEmployees, function (index, entry) {
toDisplayText += entry.name + ", " + entry.age + "\n";
});
alert(toDisplayText);
Above code will show us an output as:
Complete Code
Here is the complete code we have used to get unique items/values from multidimensional array:
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var dupes = [];
var uniqueEmployees = [];
var employee = [{ "name": "Joe", "age": 25 },
{ "name": "Ron", "age": 24 },
{ "name": "Ken", "age": 32 },
{ "name": "Dan", "age": 30 },
{ "name": "Joe", "age": 25 },
{ "name": "Tom", "age": 22 },
{ "name": "Iva", "age": 36 },
{ "name": "Joe", "age": 25 }];
$.each(employee, function (index, entry) {
if (!dupes[entry.name]) {
dupes[entry.name] = true;
uniqueEmployees.push(entry);
}
});
console.log(uniqueEmployees);
// Use below line of code to store the results of "uniqueEmployees" array in a string
var toDisplayText = "";
$.each(uniqueEmployees, function (index, entry) {
toDisplayText += entry.name + ", " + entry.age + "\n";
});
alert(toDisplayText);
});
</script>
Conclusion
In this post we seen how we can get unique items or values from multidimensional array, store it in a different array and display the items from it.
I hope it will be helpful to you!
No comments:
Post a Comment