What is the best method to retrieve an 'Array' within an Array utilizing Angular framework?

I have a custom array structure within my component that includes a name paired with another array indicating the number of times the name has been selected.

I am facing difficulty in extracting the length of the second nested array or using something like Array.length on it.

Below is the current structure of the logged out Array:

0: (2) ["Elliott Lester", Array(4)]
1: (2) ["Frank Miller", Array(3)]
2: (2) ["Adam McKay", Array(3)]
3: (2) ["Zola", Array(3)]
4: (2) ["Saul Metzstein", Array(3)]
5: (2) ["Baltasar Kormákur", Array(2)]
6: (2) ["J.A. Bayona", Array(2)]
7: (2) ["Katsuhiro Ôtomo", Array(1)]
8: (2) ["Darren Aronofsky", Array(1)]
9: (2) ["Alex Proyas", Array(1)]
10: (2) ["Andy Humphries", Array(1)]
11: (2) ["Ken Loach", Array(1)]
12: (2) ["Francis Ford Coppola", Array(1)]
13: (2) ["Andrew Stanton", Array(1)]
14: (2) ["Danny Boyle", Array(1)]
length: 15
__proto__: Array(0)

//component code

  let data = groupBy(this.mom,'name')
  this.data = Object.keys(data);
  this.values = Object.keys(data).map(key => data[key]);
  const voting = {};
  this.data.forEach((key, idx) => voting[key] = this.values[idx])
  let votesresults = [];
  for (var player in voting) {
    votesresults.push([player, voting[player]]);
  }
  votesresults.sort(function(a,b){
    return  b[1].length - a[1].length;
  });
  this.values = votesresults;
  console.log(votesresults);

I would like to display the elements as:

Elliott Lester, 4 - but I'm struggling to achieve this. Any help would be appreciated.

I have attempted to bind the length property to the 'values' array like:

{{ values[i].length }} - which only displays the total length of the entire array.
{{ values[i].Array.length }} - even though I knew this wouldn't work, I gave it a shot due to lack of ideas! 

Answer №1

After analyzing the given information, it appears that the array object provided is structured in a way that can yield the desired outcome.

const array = [
  [
    "Elliott Lester",
    [
      {id: 71, status: 1, sort: null, number: 9, name: "Elliott Lester"},
      {id: 65, status: 1, sort: null, number: 10, name: "Elliott Lester"},
      {id: 66, status: 1, sort: null, number: 10, name: "Elliott Lester"},
      {id: 83, status: 1, sort: null, number: 9, name: "Elliott Lester"}
    ]
  ],
  [
    "Frank Miller",
    [
      {id: 71, status: 1, sort: null, number: 9, name: "Frank Miller"},
      {id: 65, status: 1, sort: null, number: 10, name: "Frank Miller"},
      {id: 66, status: 1, sort: null, number: 10, name: "Frank Miller"}
    ]
  ],
  [
    "Adam McKay",
    [
      {id: 71, status: 1, sort: null, number: 9, name: "Adam McKay"},
      {id: 65, status: 1, sort: null, number: 10, name: "Adam McKay"},
      {id: 66, status: 1, sort: null, number: 10, name: "Adam McKay"}
    ]
  ]
];
array.forEach(function(data){
  console.log(data[0], data[1].length);
});

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

Firebase Functions Project encountering a "Cannot find module" error in VS Code

While working on a firebase functions project in Visual Studio Code, I encountered an issue inside the index.ts file. The imported modules were not being recognized even though autocomplete showed that the modules exist. When attempting to import them, I k ...

I'm struggling to grasp the reason behind the error message stating that x is not a function

Can someone help explain why I keep getting the error message "5Style is not a function"? NationalLevelCategoriesChosenList = [ ["5Style", "5MelodyHarmony", "5RhythmTempo", "5TextureStructureForm", "5Timbre"] ], [ [] ]; if (NationalLevelCategoriesC ...

Organize intricate JavaScript Arrays

Similar Question: How to sort an array of javascript objects? I'm in the process of transitioning some of my older ActionScript 2.0 code to JavaScript. While most things are running smoothly, I've hit a roadblock when trying to numerically s ...

In Angular, the data is displayed in the console but is not visible in the application

After successfully fetching data from the backend and seeing it displayed in the console https://i.sstatic.net/eRjli.png However, there seems to be an issue with rendering the data even though it is being recognized. Here's the relevant code snippet: ...

The Date_Format field in the JSON-Data is not displaying

Greetings and apologies for my limited English skills :-) I am facing a challenge with my JSON data. In my MySQL database, I have stored dates in the format YYYY.MM.DD. However, I require the format DD.MM.YYYY. So, I modified the query as follows: $rs = ...

Is it possible for a program to "return" and exit by utilizing 2D character array pointers within a loop?

I'm encountering a puzzling issue with my program. I am attempting to read from a file and represent the entire content as a 2D char array. However, whenever I attempt to assign a character to an element in that array, the program seems to abruptly st ...

Header remains fixed when scrolling

Is there a way to make the header of a Bootstrap table fixed when scrolling, while also adjusting the width of each column based on the content within it? I want the column headers to match the width of the row with the most text. Setting the position of t ...

How can you update ngModel in Angular and mark the form as dirty or invalid programmatically?

My form is connected to a model as shown below In the component file: myTextModel: string; updateMyTextModel(): void { this.myTextModel = "updated model value"; //todo- set form dirty (or invalid or touched) here } Html template: <form #test ...

Why is the complete object not being saved in the mongoose subdocument array?

I encountered a problem with my two nested schemas, where one is inside the other as an array. Even though I tried to push into the array and save the subdocument, it didn't save correctly. The saved object only includes its _id without any other fiel ...

Unable to retrieve values from JSON objects within an array

My array consists of multiple objects, each containing specific properties such as: [ { "id":17368, "creationDate":1566802693000, "status":"InProgress", "type":"NEW", "agentType":"Master" }, { "id":17368, ...

a service that utilizes $http to communicate with controllers

My situation involves multiple controllers that rely on my custom service which uses $http. To tackle this issue, I implemented the following solution: .service('getDB', function($http){ return { fn: function(){ return $http({ ...

It appears that the use of "window.location" is causing the ajax post

I'm facing an issue with sending data to PHP using AJAX and redirecting to the PHP file. It seems that when I redirect to the PHP file, the data sent through AJAX is not being received. My goal is to have a button click trigger the sending of data to ...

Apply bold formatting to the HTML text only, leaving the EJS variable untouched beside it

https://i.sstatic.net/X36eG.png Is there a way to format the text for "Guest signed up" and "Guests attended" in bold while keeping the values normal? Here is my current code: <li class="list-group-item">Guests signed up: <%= guestSignu ...

Unable to activate button click event using jQuery

I am using dot.js to enhance a specific webpage by adding a button that, when clicked, should insert text into a text field and then trigger another button to be clicked as well. To achieve this functionality, I have implemented a click handler for my butt ...

Leveraging .position() in jQuery

Check out my script here that needs some adjustments in the positioning of the text. When you click on one of the choices, the text should smoothly slide down to that specific height. I am attempting to utilize .position() to determine a relative position, ...

Is there a way for me to move the dot icon along the dotline?

Here is the code snippet: jsFiddle I have successfully implemented a click event to change the style of selected dots in dotline. Now, my query is : How can I enable dragging functionality for the dot icon within dotline? Your assistance on this matte ...

Automatically refresh a pair of pages in sequence

Seeking advice on how to execute the following steps in JavaScript: - Pause for 120 seconds - Access http://192.168.1.1/internet-disconnect (in an iframe or similar) - Pause for 3 seconds - Access http://192.168.1.1/internet-connect - Repeat Here is ...

Issue with ng-selected not functioning properly

I am facing an issue where the ng-selected is assigned as true but the option is not being selected. The following is my controller code: .controller("PendingInvoiceCtrl", function($scope, $location, safeApply, dataService) { var userData = dataServi ...

Creating an array of JSX elements or HTMLElements in a React TypeScript rendering

Currently in the process of developing a custom bootstrap card wrapper that allows for dynamic rendering of elements on the front and back of the card based on requirements. Here is the initial implementation: import React, { useState, ReactElement } from ...

How can we create a custom text search filter for month and date strings in Bootstrap-table2?

I'm working on a BootstrapTable that has a single column with a dataField of birthday, where the date is formatted as "day/month" (e.g. "3/10" for October 3rd). I managed to create a formatter that changes each string like "3/10" to display as "Octobe ...