How to organize items in an array based on paired values using Angular or Javascript?

Question

How to organize items in an array based on paired values using Angular or Javascript?

In my current scenario, I am working with a substantial array containing 120 objects. Each object within the array possesses an id value and an opposite_id value, essentially forming pairs. I'm looking for the most efficient approach to iterate through each object and either store the pairs in a new array or present them together as a pair.

For instance:


    Obj1 = {
        id: 1,
        opposite_id: 2,
        descr: "This is the first object"
   },
   Obj2 = {
        id: 2,
        opposite_id: 1,
        descr: "This is the second object"
   },
    Obj3 = {
        id: 3,
        opposite_id: 6,
        descr: "This is the third object"
   }

I aim to showcase Obj1 and Obj2 concurrently (ideally utilizing ng-repeat) as a pair without displaying both Obj2 and Obj1 to avoid repetition. Figuring out how to achieve this specific task is proving challenging for me, any guidance on this matter would be highly appreciated! Thank you

javascript arrays angularjs json

Answer 1

Answer №1

Why don't we try pairing them this way?

var app = angular.module("app", []);

app.controller("controller", function($scope) {
  var users = [{
    "id": 11,
    "user": {
      "id": 5,
      "first_name": "",
      "last_name": ""
    },
    "opponent": 2
  }, {
    "id": 12,
    "user": {
      "id": 6,
      "first_name": "",
      "last_name": ""
    },
    "opponent": 3
  }, {
    "id": 13,
    "user": {
      "id": 2,
      "first_name": "",
      "last_name": ""
    },
    "opponent": 5
  }, {
    "id": 14,
    "user": {
      "id": 3,
      "first_name": "",
      "last_name": ""
    },
    "opponent": 6
  }];

  $scope.pairs = [];
  var alreadyPaired = []; // storing ids of paired users

  for (var i = 0; i < users.length; i++) {
    var user = users[i];
    
    // pair the users if they haven't been paired before
    if (alreadyPaired.indexOf(user.user.id) === -1) {
      var opponent = null;

      for (var j = 0; j < users.length; j++) {
        if (users[j].user.id === user.opponent) {
          opponent = users[j];
        }
      }

      $scope.pairs.push({
        user1: user,
        user2: opponent
      });

      alreadyPaired.push(user.user.id);
      alreadyPaired.push(opponent.user.id);
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="controller">
  <h3>Pairs</h3>
  <table>
    <thead>
      <tr>
        <th>User</th>
        <th>Opponent</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="pair in pairs">
        <td>{{pair.user1.user.id}}</td>
        <td>{{pair.user2.user.id}}</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 2

Why don't we try pairing them this way?

var app = angular.module("app", []);

app.controller("controller", function($scope) {
  var users = [{
    "id": 11,
    "user": {
      "id": 5,
      "first_name": "",
      "last_name": ""
    },
    "opponent": 2
  }, {
    "id": 12,
    "user": {
      "id": 6,
      "first_name": "",
      "last_name": ""
    },
    "opponent": 3
  }, {
    "id": 13,
    "user": {
      "id": 2,
      "first_name": "",
      "last_name": ""
    },
    "opponent": 5
  }, {
    "id": 14,
    "user": {
      "id": 3,
      "first_name": "",
      "last_name": ""
    },
    "opponent": 6
  }];

  $scope.pairs = [];
  var alreadyPaired = []; // storing ids of paired users

  for (var i = 0; i < users.length; i++) {
    var user = users[i];
    
    // pair the users if they haven't been paired before
    if (alreadyPaired.indexOf(user.user.id) === -1) {
      var opponent = null;

      for (var j = 0; j < users.length; j++) {
        if (users[j].user.id === user.opponent) {
          opponent = users[j];
        }
      }

      $scope.pairs.push({
        user1: user,
        user2: opponent
      });

      alreadyPaired.push(user.user.id);
      alreadyPaired.push(opponent.user.id);
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="controller">
  <h3>Pairs</h3>
  <table>
    <thead>
      <tr>
        <th>User</th>
        <th>Opponent</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="pair in pairs">
        <td>{{pair.user1.user.id}}</td>
        <td>{{pair.user2.user.id}}</td>
      </tr>
    </tbody>
  </table>
</div>

How to organize items in an array based on paired values using Angular or Javascript?

Answer №1

Similar questions

The server is indicating that the validation for the user has failed due to the required field "foo" not being provided in the Node.js

Eliminating a particular element from an Array

Using V-model in conjunction with the boostrap-vue b-table component

Tips for simulating a DOM element in Jasmine so that it is accessible to the controller

The jQuery UI Tab is failing to scroll within its container

What is the best way to retrieve a value from an array?

Creating a Loop with JavaScript through a List

Error message encountered in MEAN application request

What is the best way to switch back and forth between two div elements?

Tips on managing and responding to external events in ngapp

Combining multiple JSON files into a single JSON object with duplicate keys

How can I use React.JS to scroll horizontally to a specific div id?

Deactivate Date Field for Editing Orders in WooCommerce

Issue with getStaticProps in Next.js component not functioning as expected

Contrasting characteristics of indexing and slicing within numpy structured arrays

Redux Persist causes the redux state to become undefined

Access a different tab through the utilization of JavaScript functions

The initialization process removes the 'const' qualifier from the target type of the pointer

What is the best way to update a CSS href using window.open with JavaScript?

Exploring the world of accessing JSON data