Displaying only the first date element in a loop using AngularJS, while updating an array object

Question

Displaying only the first date element in a loop using AngularJS, while updating an array object

Currently, I am facing the challenge of displaying a JavaScript object in an Angular ~1.2.24 template.

I want to display only the first occurrence of item.day.

Take a look at this sample object:

$scope.listtrail = [{
    day: '2015-08-15',
    id: 123,
    timestamp: '2015-08-15 12:23:12'
},{
    day: '2015-08-15',
    id: 122,
    timestamp: '2015-08-15 12:43:34'
},{
    day: '2015-08-15',
    id: 121,
    timestamp: '2015-08-15 14:12:56'
},{
    day: '2015-08-14',
    id: 120,
    timestamp: '2015-08-14 11:12:09'
},{
    day: '2015-08-14',
    id: 118,
    timestamp: '2015-08-14 10:11:02'
}]

Here is an example of the desired output template section:

<div ng-repeat="item in listtrail">
    <div>{{item.day}}</div>
    <div>{{item.timestamp}}</div>
</div>

The expected result wanted from the template looks like this:

<div>
    <div>2015-08-15</div>
    <div>2015-08-15 12:23:12</div>
</div>
<div>
    <div>2015-08-15 12:43:34</div>
</div>
<div>
    <div>2015-08-15 14:12:56</div>
</div>
<div>
    <div>2015-08-14</div>
    <div>2015-08-14 11:12:09</div>
</div>
<div>
    <div>2015-08-14 10:11:02</div>
</div>

Please bear in mind that the JavaScript array may grow and get updated periodically by an internal splice function.

javascript angularjs

Answer 1

Answer №1

A great solution is to incorporate the angular-filter module into your project. Here's how you can implement it:

<div ng-app="app">
  <div ng-controller="TestCtrl">
    <div ng-repeat="(key, value) in listtrail | groupBy: 'day'">
        <div>{{ key }}</div>
        <div ng-repeat="item in value">{{item.timestamp}}</div>
    </div>
  </div>
</div>

For further reference, check out this JSFiddle

Answer 2

A great solution is to incorporate the angular-filter module into your project. Here's how you can implement it:

<div ng-app="app">
  <div ng-controller="TestCtrl">
    <div ng-repeat="(key, value) in listtrail | groupBy: 'day'">
        <div>{{ key }}</div>
        <div ng-repeat="item in value">{{item.timestamp}}</div>
    </div>
  </div>
</div>

For further reference, check out this JSFiddle

Answer 3

Answer №2

<div ng-repeat="item in listtrail">
  <div ng-if="listtrail[$index-1].day !== item.day">{{item.day}}</div>
  <div>{{item.timestamp}}</div>
 </div>

Works perfectly well: https://jsfiddle.net/2o5nwy2r/5/

Consider using $filter for a more robust groupBy functionality in your ng-repeat. Check out angular-filter here: https://github.com/a8m/angular-filter

Answer 4

<div ng-repeat="item in listtrail">
  <div ng-if="listtrail[$index-1].day !== item.day">{{item.day}}</div>
  <div>{{item.timestamp}}</div>
 </div>

Works perfectly well: https://jsfiddle.net/2o5nwy2r/5/

Consider using $filter for a more robust groupBy functionality in your ng-repeat. Check out angular-filter here: https://github.com/a8m/angular-filter

Answer 5

Answer №3

Make sure to always compare values with the previous day's data

<div ng-repeat="item in listtrail">
  <div ng-if='listtrail[$index -1].day != item.day'>{{item.day}}</div>
  <div>{{item.timestamp}}</div>
</div>

It is important to maintain the chronological order of your records by day.

Check out this jsFiddle

Answer 6

Make sure to always compare values with the previous day's data

<div ng-repeat="item in listtrail">
  <div ng-if='listtrail[$index -1].day != item.day'>{{item.day}}</div>
  <div>{{item.timestamp}}</div>
</div>

It is important to maintain the chronological order of your records by day.

Check out this jsFiddle

Answer 7

Answer №4

My solution was in line with the others, but I included an additional conditional check for $index == 0:

<div ng-app>
  <div ng-controller="TestCtrl">
    <div ng-repeat="item in listtrail">
      <div ng-if="$index == 0 || listtrail[$index-1].day != item.day" ng->{{item.day}}</div>
      <div>{{item.timestamp}}</div>
    </div>
  </div>
</div>

Although omitting this check doesn't seem to result in an error, it goes against my personal preference.

https://jsfiddle.net/2o5nwy2r/6/

Answer 8

My solution was in line with the others, but I included an additional conditional check for $index == 0:

<div ng-app>
  <div ng-controller="TestCtrl">
    <div ng-repeat="item in listtrail">
      <div ng-if="$index == 0 || listtrail[$index-1].day != item.day" ng->{{item.day}}</div>
      <div>{{item.timestamp}}</div>
    </div>
  </div>
</div>

Although omitting this check doesn't seem to result in an error, it goes against my personal preference.

https://jsfiddle.net/2o5nwy2r/6/

Displaying only the first date element in a loop using AngularJS, while updating an array object

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

creating folding effect using javascript and css with divs

Transmitting information to the service array through relentless perseverance

Sending information to a dialog box

Error encountered in ES6 destructuring syntax

Is it possible to write a text file in UTF-16 using Javascript?

What are some strategies for preventing the $window.alert function from being triggered within an AngularJS controller's scope?

Converting HTML to PDF using AngularJS

Building Dynamic Web Applications with Meteor and React

Error encountered while waiting for Angular to finish loading in Protractor: ScriptTimeoutError - Task: Protractor.waitForAngular()

Best practices for initializing Angular 1 code?

Executing a loop synchronously within an Angular application

What is the best way to eliminate HTML encoding from a string in Angular 4?

Unleashing the Power of the "OR" Operator in Form Field Validation

Ideas for showing backslashes in the context of a Cognito filter solution

Tips for looping through multiple states within a single table

Randomize the array of images in Nuxt every time the page is reloaded to display a variety of logos in the carousel

Issue with executing Javascript on a basic HTML webpage

Modifying the route category through parsing information from a JSON file

Issue creating a JWT using jsonwebtoken module in Node.js

Is there a way for me to identify a click on a specific element along with all of its child elements, excluding one