티스토리 뷰
AngularJS: Handling Null and Empty Values with orderBy Filter
JoyJaewon 2023. 7. 26. 11:44
Today, I want to share a powerful solution that I discovered while working with AngularJS's `orderBy` filter. Sorting lists is a common task in web development, and AngularJS offers a convenient `orderBy` filter to handle it. However, I stumbled upon a challenge when dealing with null or empty values during sorting. In AngularJS, orderBy filter doesn't provide a straightforward way to handle null or empty values in a special way, such as placing them at the end of the list. However, we can workaround this by creating a custom filter function. This custom function will separate the list into two arrays, sort both arrays, and then concatenate them.
Here's a simplified version of the custom sorting function:
function customSort(itemList) {
var withTheData = [];
var nullData = [];
for (var i = 0; i < itemList.length; i++) {
if (itemList[i].orderKey !== null && itemList[i].orderKey !== undefined) {
withTheData.push(itemList[i]);
} else {
nullData.push(itemList[i]);
}
}
withTheData.sort(sortFunction);
nullData.sort(sortFunction);
return withTheData.concat(nullData);
}
}
In the code above, we define the `customSort` function, which takes an `itemList` as its argument. Inside the function, we declare two arrays: `withTheData` to store items with valid `orderKey`, and `nullData` to store items with null or undefined `orderKey`.
Next, we loop through the `itemList` and separate the items based on whether they have a valid `orderKey` or not. If the `orderKey` is neither null nor undefined, we push the item into `withTheData`; otherwise, we push it into `nullData`.
After that, we sort both arrays using a custom sorting function called `sortFunction`. This function allows you to implement your specific sorting logic. In this example, we sort the items by 'Name', assuming 'Name' is a property of the items.
Finally, the function returns the concatenated result of `withTheData` and `nullData`, ensuring that items with null or undefined `orderKey` appear at the end of the sorted list.
With this custom sorting function, you can now easily manage null or empty values in your AngularJS projects and get the exact sorting you want.
Happy coding and happy sorting!
'AngularJS' 카테고리의 다른 글
AngularJS: Validating Data Before Updating the API (0) | 2023.09.30 |
---|---|
AngularJS: Importing CSV Files and Save Each Row (0) | 2023.09.01 |
AngularJS: Converting and Downloading JSON as CSV (0) | 2023.08.15 |
AngularJS: Dealing with Async Updates using Promise.all() and $scope.$applyAsync() (0) | 2023.08.01 |
Introducing AngularJS and Analyzing the MVC Architecture (0) | 2023.05.19 |
- Total
- Today
- Yesterday
- #노개북 #노마드코더 #개발자북클럽 #클린코드
- junior frontend developer
- responsive table
- Desk Setup
- CSV Validation
- BEM
- JSON-CSV-Conversion
- promise.all()
- developer tools
- handleNullData
- scrollabe table
- CSS
- frontend
- bootstrap5
- Responsive Troubleshooting
- ImportCSV
- BEM-like-Naming
- angularjs
- CSS white space issue
- Bootstrap5 tab
- CSR
- Next.js
- orderByFilter
- SSR
- React.js
- responsive design
- UX
- $scope.$applyAsync()
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |