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

Utilize the Vue-Chartjs plugin registration for a specific chart component only

I am currently working with a chart component in Vue 3 using the composition API. My goal is to incorporate the datalabels plugin into this specific chart only. Upon attempting to register the plugin outside of the chart's data or options, I noticed ...

Guide to creating JSDoc for a TouchEvent handler

Looking to improve my shorter-js codebase with JSDoc for TypeScript definitions, but hitting a roadblock. I've implemented the on() function using Element.addEventListener, working well so far. However, when passing a TouchEvent as a parameter for an ...

Ways to showcase every resource from an API in React JS

I need help with adding code to display products along with their images from an API in my existing code. Can someone assist me with this? import React, {useState, useEffect} from 'react' import "bootstrap/dist/css/bootstrap.min.css" im ...

Obtain the element created by a directive within the controller

I'm currently utilizing the wrapper located at: https://github.com/Yankovsky/nouislider-angular/blob/master/nouislider.js for the nouislider plugin. Within my controller, I aim to access the element that I've created in the template: <div ya ...

When conducting tests using Selenium and the headless Google Chrome browser in Java, the dynamic JS content fails to load

Currently, I am in the process of testing a website that I have developed as part of a Spring Boot project using Selenium. While I can successfully test basic functionalities such as page loading and title verification, I am encountering difficulties when ...

Is the API providing a response in the form of an HTML document

I just created a cutting-edge React application that leverages the power of "fetch" to fetch data from an API. Within my App component in the "App.js" file, you can find the following code snippet: function fetchData() { fetch(`WORKINGURLWITHAPIKEY`) ...

When the progress bar is clicked, the background color changes and then changes back again

https://www.w3schools.com/code/tryit.asp?filename=FG1ZE0NJ4ZX7 https://i.stack.imgur.com/Bnd0k.png I have created a progress bar that resembles the screenshot provided. When I hover over it, the color changes to green. However, I am looking for assistanc ...

Utilizing the onFocus event in Material UI for a select input: A comprehensive guide

Having trouble adding an onFocus event with a select input in Material UI? When I try to add it, an error occurs. The select input field does not focus properly when using the onFocus event, although it works fine with other types of input. Check out this ...

Tips on safeguarding your templates while working with SailsJS and AngularJS

I am currently working on a web application using SailsJS and AngularJS. My project requires session management to track user login status. I came across this helpful tutorial and implemented an index.ejs view located in the /view folder. Within the index. ...

What is the process for implementing text box validation on a button click within a gridview in asp.net utilizing javascript?

How can I implement textbox blank validation on button click within a gridview using JavaScript? My gridview has multiple rows with 2 textboxes and a save button in each row. I need to validate the textboxes when their corresponding save button is clicked. ...

Executing a jQuery script on various elements of identical types containing different content (sizes)

I am currently working on a jQuery script that will center my images based on the text block next to them. Since I am using foundation 5, I have to use a jQuery script to override the CSS instead of using vertical-align: middle. The script looks like thi ...

Utilize [markdown links](https://www.markdownguide.org/basic-syntax/#

I have a lengthy text saved in a string and I am looking to swap out certain words in the text with a highlighted version or a markdown link that directs to a glossary page explaining those specific words. The words needing replacement are contained within ...

Struggling with transferring form input data to a different file using JavaScript, Node.js, React.js, and Next.js

I've been struggling with writing form input to a separate file in JavaScript. I created a demo repo to showcase the issue I'm facing. Check it out here: https://github.com/projectmikey/projectmikey-cant-write-to-api-dir-stackoverflow Locally, t ...

What is preventing me from accessing React state within Tracker.Autorun?

I'm feeling lost on this one. I have implemented a Tracker.autorun function to monitor when my Mongo subscription is ready for querying (following the advice given in this previous Meteor subscribe callback). It seems to be working fine as it triggers ...

Ensure that the input box expands to occupy the entire HTML page

After reviewing numerous pages and questions related to this topic, I have located the correct solution but am struggling to implement it. My goal is to achieve a similar outcome to the second question, but I'm having difficulty figuring out how to do ...

Tips for seamlessly incorporating advertisements into a mixed application

I am having trouble adding banner ads to my hybrid application developed with Telerik. Despite my extensive research, I have been unable to find a suitable solution. Is there any html5 or javascript banner advertising service/API that is compatible with ...

"Encountering a 'NetworkError: 404 Not Found' message while attempting to upload a file through the combination of AngularJS and Node.J

I encountered an issue while trying to upload a file: "NetworkError: 404 Not Found - " 404: Not found Here is the code snippet from my webpage: <div class="col-sm-10"> <input type="file" ngf-select="uploadFiles($file)" ...

Is it possible to mimic a ref attribute with jest/rtl within a functional component?

I'm currently facing an issue with a functional component that includes a helper function. function Component() { imgRef = useRef(null) function helperFunction(node, ref) { if (!ref || !ref.current) return; ...do someth ...

Exploring the process of iterating through JSON data using JSON.parse

After making a request to my Django server for data, I utilized JSON.parse to convert the data into a JSON object. My goal is to iterate through each attribute of the object's field and execute the function createDiv on each one. function load_blog( ...

Highlighting the current menu item by comparing the URL and ID

Looking to make my navigation menu items active based on URL and ID, rather than href. None of the suggested solutions (like this one, this one, or this one) have worked for me. This is how my Navigation is designed: <nav id="PageNavigation"& ...