Is it possible to use ng-repeat on an array that contains data with inner arrays having similar key-value pairs, grouping them

I have a collection of data that includes sub-collections with a common key (TypeOfServiceAssigned:Array(2)) in both inner arrays. I am looking to use ng-repeat to group similar key-value pairs together and separate those that are different.

For a clearer explanation, refer to the example below:

Array = [
  {
    Quotation:1200,
    TypeOfServiceAssigned:["Primary", "Partial Services"],
    VendorEmail:"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1b5a5b7c767a727735787476">[email protected]</a>"
  },{
    Quotation:1350,
    TypeOfServiceAssigned:["Partial Services"],
    VendorEmail:"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="83c2e7e7c3e4eee2eaefade0ecee">[email protected]</a>"
  }
];

My goal is to use ng repeat on Array so that it organizes the data into two groups based on the values in TypeOfServiceAssigned - one for Primary and another for Partial Services. Additionally, for Partial Services, it will display two separate lists.

javascriptangularjs

Answer №1

If you want the most efficient method, consider handcrafting a function to return exactly what you need. You can see an example here and then bind it to your nested ng-repeat as usual :)

Typically, this type of operation should be done on the server side or in a service, but sometimes you may need to handle it client-side.

function doGroupBy() {
    var result = {};
    for (var i = 0; i < input.length; ++i) {
        var current = input[i].TypeOfServiceAssigned;
        for (var j = 0; j < current.length; ++j)
            if (result[current[j]])
                result[current[j]].push(input[i]);
            else
                result[current[j]] = [input[i]];
    }

    return result;
}

var input = [{ Quotation: 1200, TypeOfServiceAssigned: ["Primary", "Partial Services"], VendorEmail: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2465644349454d480a474b49">[email protected]</a>" },
             { Quotation: 1350, TypeOfServiceAssigned: ["Partial Services"], VendorEmail: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9bdaffffdbfcf6faf2f7b5f8f4f6">[email protected]</a>" }];

var testResult = doGroupBy(input);

for (var key in testResult) {
    console.log('-----------');
    console.log(key);
    console.log(testResult[key]);
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Stopping the setTimeout function triggered by a click event in a Reactjs application

I'm a beginner with Reactjs and I ran into a dilemma while using setTimeOut. I couldn't figure out whether to use clearTimeOut or stopPropagation() to stop it. Here's my code: render: function() { return ( < div className = "colorCl ...

javascriptreactjs

Connecting events across various browsers

In a function, I had to add an event to an element called newElement. To cater for different browsers like IE and Firefox, I checked the condition based on the attachEvent property (only works in IE). if ( typeof(newElement.attachEvent) != "undefined" ) { ...

javascriptinternet-explorercross-browserdom-events

Notify when the focus is solely on the text box

How can I display an alert only when the focus is on a text box? Currently, I am getting an alert whenever I skip the text box or click anywhere on the page. The alert even appears when I open a new tab. Is there a way to fix this issue? Thank you for your ...

javascriptjqueryhtmltextboxalert

Encountering a 404 error while using Angular HTML5Mode setting

I recently enabled pretty URLs in my Angular application by switching to html5mode. However, whenever I try to refresh the page, I encounter a 404 error. For instance, if I access my app through , everything functions as expected. But when I attempt to r ...

javascriptangular-ui-routerhtml5-historyangular1.6

Encountering RangeError with the Number() function on my express.js server

I'm working with an HTML form that looks like this: <form class="" action="/" method="post"> <input type="text" name="num1" placeholder="First Number"> <input type= ...

javascriptnode.jsexpressnode-modules

Assess the iOS app on Meteor to establish a live connection with an authentic server (not the local host)

Testing my Meteor application on an iOS phone has been a learning experience. Following the steps outlined in this guide, I initially deployed the app with the commands: meteor install-sdk ios meteor add-platform ios meteor run ios meteor run ios-dev ...

javascriptiosnode.jsmeteor

Using Javascript to retrieve a variable and dynamically updating the source of an HTML iframe

I have two JavaScript variables, 'long' and 'lat', in the code below. My challenge is to append these values to the end of the iframe URL. I would appreciate assistance on modifying the code below to achieve this. The iframe code bel ...

javascriptjqueryhtmliframe

Adjust the flexslider to transition to a new slide when hovering over the thumbnails

I have a flexslider with thumbnails like this ; https://i.stack.imgur.com/9bfC2.jpg I am looking to change the slide when the user hovers over the thumbnails. How can I achieve this functionality? Here is the jQuery code I am currently using to set up th ...

javascriptjqueryhtml

Discover the power of lodash's .groupBy method as you learn how to efficiently group objects within another

Utilizing lodash's _.groupBy function, I have generated the following data: { "Generic Drugs":[ { itemDes: "Dulcolax", itemGeneric: "Bisacodyl", pr ...

javascriptangularjslodash

Incorporating TypeScript into a project originally developed in JavaScript

I'm considering using TypeScript to write code for a JavaScript project. I've come to appreciate the benefits of TypeScript and am especially interested in using it for our AngularJS 1.5 project, which we plan to migrate soon. As I'm new to ...

javascriptangulartypescript

What occurs when a function component is passed as a state variable?

Can a function component be passed as a state variable? Is it possible for the code below to work correctly? I attempted it but encountered an error stating props.children isn't a function. Do you know if this approach can be successful? const App = ...

javascriptreactjs

Overlay Image on Card, Overflowing into Card Body

I currently have a webpage featuring cards. Each card includes a thumbnail at the top with an overlay. The main content of the card needs to be positioned outside of the overlay, but it ends up overflowing onto it. Take a look at the demo: https://codepe ...

javascripthtmlcssbootstrap-4

Enhancing Form Validation with Jquery: SSN Pattern Matching, Input Masking, and Conditional Validation

Struggling with getting the Jquery Validation to cooperate with specific rules. The SSN field is masked with SSN format, and I need the validation to prevent submission unless it's a complete SSN. There's a regex function that rejects non-SSNs, ...

javascriptjqueryregexjquery-validatemask

Obtain the selected dropdown value and transfer it to the controller seamlessly without the need to reload the page

Currently, I am facing an issue with two dropdown lists in a bootstrap modal - CATEGORY and SUBCATEGORY. The values in the SUBCATEGORY list depend on the selection made in the CATEGORY list. My goal is to retrieve the selected value ID and pass it to my co ...

javascriptphpajaxcodeignitermodal-dialog

Implementing the onClick function for the correct functionality in a ReactJS map component

I have designed a mockup and now I am trying to bring it to life by creating a real component. View my component mockup here Starting with something simple, I created 3 buttons and an array. However, when I click on any button, all features are displayed ...

javascriptarraysreactjs

How can I modify the # symbol with .htaccess?

When someone accesses the following URL: www.facebook.com/index.php#sk=inbox The .htaccess file will redirect it to the server as: www.facebook.com/index.php?sk=inbox This allows me to retrieve the value of sk using PHP like this: *echo $_GET[&a ...

phpjavascriptjqueryajax.htaccess

Concatenate a variable string with the JSON object key

I am currently working on a request with a JSON Object structure similar to the following: let formData = { name: classifierName, fire_positive_examples: { value: decodedPositiveExample, options: { filename: 'posit ...

javascriptnode.jsjson

A guide on implementing the stencilFunc method in Three.js

Is it possible to utilize stencilFunc and stencilOp functions within Three.js? I attempted to incorporate code for a stencil test but encountered issues. var scene = new THREE.Scene(); var renderer = new THREE.WebGLRenderer({ antialias: true, st ...

javascriptthree.js

Is there a way to utilize a parameter for the user's input instead of relying on document.getElementById when incorporating a button?

let totalScore = 0; var myArray = [1, 2, 3, 4, 5]; let randomNum; function NumGuess(userInput) { var userGuess = userInput; var i; for (i = 0; i < 1; i++) { var randomNum = myArray[Math.floor(Math.random() * myArray.length)]; } if (us ...

javascriptparameters

Utilizing Angularjs for image uploads

I've been working on this code for image uploading: $scope.uploadAvatar = function(e) { $scope.uploadAvatarError = false; $scope.uploadAvatarSuccess = false; var f = document.getElementById('uploadAvatar').files[0], fd = ...

angularjs