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

Creating a search-enabled multi-select feature in a Tabulator.js column

Connect two ng-models in a select in AngularJS

Transform HTML content into a PDF document with page breaks

Manipulating a global variable in VueJS

"VS Code's word wrap feature is beneficial for wrapping long lines of text and code, preventing them from breaking and ensuring they are

Developing dynamic checkbox components using jQuery - unusual behavior in Internet Explorer

Why do we even need Angular controllers when directives can perform the same tasks as controllers?

Tips for displaying error messages directly next to input fields in a service portal

creating a multi-tiered dropdown menu using both CSS and JavaScript

Refreshing a Vue JS component

Retrieve information from the database and showcase it in a competitive ranking system

Inactive user registration with activation through OTP

How can you efficiently identify and resolve coding errors or typos in your code?

Effortlessly move and rearrange various rows within an HTML table by utilizing JQuery alongside the <thead> elements

Dealing with Superagent and Fetch promises - Tips for managing them

Ways to extract a single digit from the total sum of a date in the format of 15-06-2015

Tips for executing a script while updating npm version

Experimenting with an angularjs directive, not yielding the desired results

What is the best way to enter text into the terminal following the execution of "yarn start"?

Utilize store functions (such as dispatch and getState) in external modules like webSockets, rather than within components