Angular 1.6 - ng-repeat orderby and groupby items

Question

So what I want to achieve is:

loop through array of messages (ng-repeat)
sort messages by date
then group current message with previous one, if author is matching (store in the same div element)
create new div if current messages's author is not matching previous one
continue loop

I'm stuck here:

<div class="message" ng-repeat="msg in chatDetails.msgList">
  <p>{{ msg.text }}</p>
</div>

I need to keep exact order - simply, if previous element doesn't match with current - new box should be created.

Is that even possible in angular? If so, could you show me how, please?

Thank you!

edit

Heres sample result of chatDetails:

  {
    msgList: [
      { author: 0, text: 'hi', date: 1493050181799 },
      { author: 1, text: 'hola!', date: 1493050181801 },
      { author: 1, text: 'wilkomen', date: 1493050181802 },
      { author: 0, text: 'czesc', date: 1493050181803 }
      { author: 0, text: 'ciao', date: 1493050181804 }
      { author: 1, text: 'bonjour', date: 1493050181805 }
    ]
  }

Somehow desired result:

<div class="message-list">
  <div class="message-group" data-author="1">
    <div class="message">
      <p>hola</p>
    </div>
    <div class="message">
      <p>ciao</p>
    </div>
  </div>
  <div class="message-group" data-author="0">
    <div class="message">
      <p>hola</p>
    </div>
  </div>
  <div class="message-group" data-author="1">
    <div class="message">
      <p>hola</p>
    </div>
    <div class="message">
      <p>hola</p>
    </div>
  </div>
</div>

are you passing `chatDetails` to the controller? you can check by adding the following html `
{{ chatDetails }}
` (do it above the message) — Denis Tsoi, Apr 24 '17 at 16:01
@DenisTsoi `chatDetails` is scope variable. Created by directive in this case. — Patryk Cieszkowski, Apr 24 '17 at 16:02
ah sorry - i didn't read the whole message - so you're just to solve the `group by` section of the problem. Maybe `groupBy` filter may help. — Denis Tsoi, Apr 24 '17 at 16:03
i'd need more info on `chatdetails` structure before i can continue ... — Denis Tsoi, Apr 24 '17 at 16:05
possible duplicate of [how-can-i-group-data-with-an-angular-filter](http://stackoverflow.com/questions/14800862/how-can-i-group-data-with-an-angular-filter) — Denis Tsoi, Apr 24 '17 at 16:07
JSFiddle working example - https://jsfiddle.net/plantface/L6cQN/ — Utkarsh Dubey, Apr 24 '17 at 16:20
Or just google - **ng-repeat group by example in jsfiddle**. You found many solution. — Utkarsh Dubey, Apr 24 '17 at 16:21
@Utkarsh Dubey no. Those are completely different cases. Example you guys redirected me to, groups all items into 1 box. I need to keep the order, and create the same wrapper-div multiple times (if there's such need). Please, take a look at desired output i posted in edit. — Patryk Cieszkowski, Apr 24 '17 at 16:23
@DenisTsoi, completely agree. Reference link - https://github.com/a8m/angular-filter/issues/57#issuecomment-65041792 — Utkarsh Dubey, Apr 24 '17 at 16:31
@DenisTsoi again: no. This **does not** do what I described above. What it does, it creates just **2 divs**, in which it outputs all messeges, according to sender's id. What's the point of doing such chat? I need all messages to be displayed in valid order. — Patryk Cieszkowski, Apr 24 '17 at 17:02
I finished my job for today, I'll be back once i got home. Thank you for your help, guys. — Patryk Cieszkowski, Apr 24 '17 at 17:03
@PatrykCieszkowski dude - idk what that response was about - kinda crappy attitude if people are freely assisting - chill — Denis Tsoi, Apr 24 '17 at 17:05
@DenisTsoi you shall chill, buddy, as I just told you. The example shown is completely not related to the question. I even thanked you for your time, and now you jump on me. Grab a beer and calm down. — Patryk Cieszkowski, Apr 24 '17 at 17:07
the example i gave above was helped along by Utkarsh (which is in the right direction) - the issue is- idk why youre taking it out one someone (it's not like i'm bugging you - besides - you're taking it out on someone who's only commented partially, and is pointing to the right direction) (`ordering by date then grouping by author is what you asked for`) - the specifics i've yet to finalise but it kinda sucks getting the brunt of that negativity when i've just spent an hour reasearching for you. — Denis Tsoi, Apr 24 '17 at 17:11
@DenisTsoi because I can not mention two users at once. That's why. And because you reported a duplicate - which redirects to same example dear Utkarsh shown. — Patryk Cieszkowski, Apr 24 '17 at 17:13
Possible duplicate doesn't mean it is. It's nothing personal. — Denis Tsoi, Apr 24 '17 at 17:14
@DenisTsoi and no. The output is clearly not what I needed. If you're kind enough, please take a look at my post again, I updated earlier desired output there - that's what I'd like to achieve. But instead, ordering by date and then grouping by author - gives just 2 divs, to which it prints all the data. Sure it isn't. You just were the first one. :) — Patryk Cieszkowski, Apr 24 '17 at 17:15
Look my comment of the pipe doesn't solve your problem since it requires a custom filter - which i was looking at before being mentioned (obvious since there isn't an answer below) - that's because the `angular-filter` that Utkarsh has linked (a library of reusable filters) has encountered this problem. Aka - this is not a trivial problem. Good luck anyway — Denis Tsoi, Apr 24 '17 at 17:20

score -1 · Answer 1 · answered Apr 24 '17 at 16:05

-1

I believe your problem can be solved with "orderBy".

https://docs.angularjs.org/api/ng/filter/orderBy

It would look something like:

<div class="message" ng-repeat="msg in chatDetails.msgList | orderBy: 'date'">
    <p>{{ msg.text }}</p>
</div>

If your msg objects have some date or index value, you can sort by that number.

answered Apr 24 '17 at 16:05

GreenFox

445
1
3
12

Hi. That would just solve the order, but wouldnt help with grouping. But thank you anyways! – Patryk Cieszkowski Apr 24 '17 at 16:16

Angular 1.6 - ng-repeat orderby and groupby items

edit

1 Answers1