Utilizing AngularJS to effectively group and filter using Ng-repeat

I am working with an array retrieved from an Azure server Log (clicks array) that I need to sort in a specific way. Below is the request:

$http({
      method: 'Get',
      headers: {
       'Host': 'api.applicationinsights.io',
       'x-api-key': 'xxxxxxxxxxxxxx'
       },

       url: 'https://api.applicationinsights.io/v1/apps/20exxxx-xxxx-xxxx-xxxx-cf8bc569d261/query?query=requests | where timestamp > datetime(2018-03-13) and timestamp <= datetime(2018-03-22) %2B 1d | where name contains "GetCode" | where name contains "9278"'
       })
         .success(function (data) {
          $scope.clicks = data.tables[0].rows;
          console.log($scope.clicks)
          })

The resulting array consists of approximately 275,000 rows:

0:
Array(37)
0:"2018-03-22T08:37:02.982Z"
1:"|ypdKJH+nmLI=.aeeeecd8_"
2:null
3:"GET /content/GetCode/192.0/9278"
etc.
1:
Array(37)
0:"2018-03-22T08:37:04.877Z"
1:"|nynZFXWHS7g=.aeeeece2_"
2:null
3:"GET /content/GetCode/1773.0/9278"
etc.

In my NG-Repeat, I only utilize [3], so I created the following:

<div ng-repeat="click in clicks">
    click: {{(click[3].split('GET /content/GetCode/')[1]).split('/9278')[0]}}
</div>

This provides me with a list of values like:

192.0
1773.0
198.5
112,0
32.8
3148.7
etc. x 100.000

My aim now is to group these values into minute intervals, say every 30 seconds.

For example:

  0- 30: 0
 31- 60: 1 (aka 32.8)
 61- 90: 0
 91-120: 1 (aka 112.0)
121-150: 0
151-180: 0
181-210: 2 (aka 192.0 & 198.5)
211-240: 0 etc. etc. you get the idea i guess.

How can I achieve this grouping?

Answer №1

To achieve this, JavaScript must be used:

  var groupedArray = []
  var clicks = {
    1: [
      'asd', 'asdasd', 'GET /content/GetCode/192.0/9278'
    ],
    2: [
      'asd', 'asdasd', 'GET /content/GetCode/1773.0/9278'
    ]
  }
  var a = []
  for (var key in clicks) {
    a.push((clicks[key][2].split('GET /content/GetCode/')[1]).split('/9278')[0])
  }
  a = a.sort(function(a, b) {
    return a - b;
  })
  for(let i = 0; i<a.length; i++) {
    arrayIndex = parseInt(a[i]/30);
    groupedArray[arrayIndex] = (groupedArray[arrayIndex] == undefined) ? 1 : (groupedArray[arrayIndex] + 1);
  }
  for(let i = 0; i<groupedArray.length; i++) {
    groupedArray[i] = (groupedArray[i] == undefined) ? 0 : groupedArray[i]
  }

HTML

<ul>
  <li ng-repeat="item in groupedArray">
    {{($index) * 30}} - {{($index + 1) * 30}} -> {{item}}
  </li>
</ul>

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

elevate the div with a floating effect

My goal is to create a chat feature for users that will only be visible for a limited time period. I was thinking of using PHP and timestamp to achieve this functionality, but I also want to make the chat visually disappear by having the message div float ...

Establish a connection between two pre-existing tables by utilizing the Sequelize framework

I have two tables already set up (User and PaymentPlan), but they were not initially linked together. PaymentPlan.ts import { DataTypes, Model } from "sequelize"; import { sequelize } from "./DBConnections/SequelizeNewConnection"; exp ...

Solving the Challenge of URL Issue in Ajax Call to MVC Controller

I have searched extensively for a solution to my jQuery/MVC problem, but haven't found one that works. Here is the JavaScript code I am using: $.ajax({ type: "POST", url: '@Url.Action("Search","Controller")& ...

Ways to prevent recurring variables in Twitter bootstrap dialogues

I need assistance with deleting multiple links using ajax: <a id="id-1">link1</a> <a id="id-2">link2</a> <a id="id-3">link2</a> <a id="id-4">link2</a> ... This is the simplified version of my code: $(docum ...

"Encountering a mysterious error while trying to perform unit testing on an AngularJS

I've been working on adding unit tests for an AngularJS service that returns a constructor, similar to this example: angular.module('utilities', []). factory('Toy', [function () { var Toy = function (arg) { ...

Firefox and Internet Explorer do not support the functionality of HTML5 <audio> tags

My radio stream player code works perfectly on Chrome and iOS Safari, but I'm facing compatibility issues with Firefox and Internet Explorer 11. Here's a snippet from my index.php file: <script type="text/javascript" src="http://code.jquery. ...

Vuejs is throwing an error claiming that a property is undefined, even though the

I have created a Vue component that displays server connection data in a simple format: <template> <div class="container"> <div class="row"> <div class="col-xs-12"> <div class="page-header"> < ...

What is the reason for the unique behavior of v-bind with boolean attributes? More specifically, why is the number 0 considered truthy in

According to the official documentation, <button v-bind:disabled="isButtonDisabled">Button</button> In this example, the disabled attribute will be added if isButtonDisabled is equal to 0, despite the fact that in JavaScript, 0 is co ...

A comprehensive guide to effectively formatting Recharts in React: addressing alignment and size management!

While attempting to style two graphs as floating cards, I am encountering difficulties in controlling the sizing and centering of the graphs. Specifically, I am having trouble with the pie chart in this example. To address this issue, I am passing paramete ...

"Every time ajax is called, it will always generate

function lks() { var groupname = document.getElementById('groupname').value; $.ajax ({ url: 'verifyGroup.php?groupname='+groupname, type: 'get', ...

MVC3 does not support JQuery UI

Just recently, I had all my jquery-ui elements functioning perfectly. However, now it seems that none of the jquery-ui features are working anymore. In my Site.Master page, I have included the following code... <link href="../../Content/Site.css" rel=" ...

I want to display events from my database table on their corresponding dates using JavaScript and jQuery. How can I achieve this?

Using the FullCalendar plugin, I attempted to achieve a specific functionality, but unfortunately fell short of my goal. Below is the snippet of my scripting code: $('#calendar').fullCalendar({ //theme: true, header: { ...

What could be the reason for the selection box in my form not changing the items when togg

I'm having an issue with my form selection box code that used to work but is now not functioning properly. Could someone please help me identify where the error lies? Essentially, I have a form with the ID #main and a select box named #chart-type. Th ...

Tips for navigating the material ui Expanded attribute within the Expansion Panel

After looking at the image provided through this link: https://i.stack.imgur.com/kvELU.png I was faced with the task of making the expansion panel, specifically when it is active, take up 100% of its current Div space. While setting height: 100% did achi ...

Set iframe scroll to match the height of the user's screen resolution

Can the height of an iframe scroll be adjusted to match the size of the screen (browser)? Essentially replacing the default browser scroll with the iframe scroll. Here's what I'm looking to achieve: Currently, my browser scroll is disabled: < ...

"How to dynamically fill a text input field from a table using jQuery when a specific value is selected, potentially involving multiple rows (possibly

Scenario I created a form that allows users to place orders for articles. These articles are displayed in a table within another form, where each article is listed with its code, description, and price. The goal is for users to select an article from th ...

The updateItem function in the JSGrid controller was not called

Currently, I am working on a project involving js-grid. However, I have encountered an issue where the updateitem function of the controller is not being invoked when attempting to update a column field. Additionally, the field resets to its old value wi ...

Setting the dimensions of an HTML - CSS block

I am trying to style a navigation bar using the following CSS code: #nav {} #nav a { position: relative; display: inline-block; color: #F0F0F0; width: 1em; height: 2em; line-height: 0.9em; } #nav a.ic ...

Enhance your Rails application by dynamically updating table cells with Ajax, eliminating the need for

In my index.html.erb file, I have set up one form and one table. Using Ajax allows me to submit the form without any redirects. <%= form_for approval, remote: true do |f| %> <%= f.check_box :pass %> <%= f.submit%> <% end %> My ...

Split the string in JavaScript and then count the characters to decrypt

I am currently working on a task that involves splitting a string at every space. I have successfully achieved this using .split(" "), but now I need to determine the length of each individual string. My goal is to check if a given string includes a midd ...