rearrange results in ng-repeat based on specified array in AngularJS

Question

rearrange results in ng-repeat based on specified array in AngularJS

Currently delving into Angularjs and have a quick query:

I recently received an array from a user which looks like this:

userPreferences = [7,5,4]

Additionally, I am working with an object that uses ng-repeat to showcase various news items. The object structure is as follows:

{
    "id": 1,
    "preferences": [
      3,
      4
    ]
}

My goal is to utilize the array retrieved from user preferences within my ng-repeat function in order to sort the news articles by displaying the preferred ones first, followed by the remaining news. Is this achievable?

Would something along these lines work:

<li ng-repeat="new in news | filter:{'userPreferences' : new.preferences}">

I'm not entirely sure whether I should be using filter, orderBy, or sort for this task. Any assistance would be greatly appreciated!

javascript arrays angularjs

Answer 1

Answer №1

If you want to create a custom function that calculates the number of matched preferences in your scope, you can do so like this:

function findMatchingPreferences(array1, array2) {
    return $filter('filter')(array1, function(n){
    return array2.indexOf(n) != -1;
  });
}

$scope.countMatchedPreferences = function(n) {
    return findMatchingPreferences(n.preferences, $scope.userPreferences).length;
};

You can then use this function with the orderBy filter like this:

<li ng-repeat="n in news | orderBy:countMatchedPreferences:true">{{n}}</li>

This will sort the news items based on the number of matched preferences in descending order.

Check out the example on Fiddle

Answer 2

If you want to create a custom function that calculates the number of matched preferences in your scope, you can do so like this:

function findMatchingPreferences(array1, array2) {
    return $filter('filter')(array1, function(n){
    return array2.indexOf(n) != -1;
  });
}

$scope.countMatchedPreferences = function(n) {
    return findMatchingPreferences(n.preferences, $scope.userPreferences).length;
};

You can then use this function with the orderBy filter like this:

<li ng-repeat="n in news | orderBy:countMatchedPreferences:true">{{n}}</li>

This will sort the news items based on the number of matched preferences in descending order.

Check out the example on Fiddle

rearrange results in ng-repeat based on specified array in AngularJS

Answer №1

Similar questions

Capturing Data from Tables and Saving it with Protractor

The Lerna command for adding packages fails with an error message stating that the packages are not related

Remove the JSON object by comparing IDs between two JSON objects in JavaScript or Node.js, deleting it if the ID is not found

Tips for managing errors when using .listen() in Express with Typescript

AngularJS ng-repeat feature will display unique values in the list and filter out any duplicates, showing only distinct items

Is there a different alternative to @JavascriptInterface in Android WebView?

How to Update a Nested Document in Mongoose

Is there a way to fix the error "The requested resource does not have the 'Access-Control-Allow-Origin' header" within Express using Firebase functions?

I am looking to record my data by utilizing getInitialProps() in next.js

Preventing Broken URLs in Jquery each

Concatenate a variable string with the JSON object key

Building a React.js application and fetching information with Ajax

What strategies can be used to manage Error return types in Typescript?

Is there a way to recover a deleted element from an array?

Send the film to Cloudinary from within an AngularJS single page application running within Electron

Vue 2.0 custom filter not producing any output

Creating a Webgrid in MVC and integrating it with a custom class in AngularJS

Executing the beforeRouteLeave navigation guard on a vue component for testing purposes

The successful JSON response in an Ajax request is not functioning as expected

Error with Ajax-bound selection (dropdown) - possibly due to an empty list in certain browsers