javascript foreach loop group by values

Question

For example, given this array of objects:

[ 
    { userid: "5", articleid: "3"},
    { userid: "5", articleid: "3"},
    { userid: "5", articleid: "3"},
    { userid: "1", articleid: "2"}
]

I want to display the values this way Without repetition inside the loop:

[ 
    { userid: "5", articleid: "3"},
    { userid: "1", articleid: "2"}
]

The code used is javascript

var newMessage = '';
    function realTime(){
        db.collection('chat').where('userid', '==', <?php echo $id; ?>)
        .orderBy('time')
        .onSnapshot(function(snapshot) {
            newMessage = '';
            snapshot.docChanges().forEach(function(change) {
              if (change.type === "added") {
                //console.log(change.doc.data());
                const elements = [change.doc.data()];
                console.log([...new Set(elements.map(JSON.stringify))].map(JSON.parse));
              }
            });

            if (chatHTML != newMessage) {
                $('.msg_body').append(newMessage);
            }
        });
    }

Take a look at https://stackoverflow.com/a/14438954/16688813 — Tom, Oct 08 '21 at 14:19
duplicate of https://stackoverflow.com/questions/1960473/get-all-unique-values-in-a-javascript-array-remove-duplicates — laenNoCode, Oct 08 '21 at 14:20
Check documentations on how array functions work, you'll be able to find the solution. — Jayendra Sharan, Oct 08 '21 at 14:20

score 2 · Answer 1 · answered Oct 08 '21 at 14:22

2

This is a an easy way to do it.

const elements = [ 
    { userid: "5", articleid: "3"},
    { userid: "5", articleid: "3"},
    { userid: "5", articleid: "3"},
    { userid: "1", articleid: "2"}
];
console.log([...new Set(elements.map(JSON.stringify))].map(JSON.parse));

answered Oct 08 '21 at 14:22

Talmacel Marian Silviu

1,596
2
6
14

Wow, this is cool. I've never seen this before. I will research how this works. – jet_24 Oct 08 '21 at 14:28
Thank you I modified the question, the code used inside forEach, so it brings me the result more than once, so what is the solution? See the question again after adding the code inside forEach – Medhat Farid Oct 08 '21 at 14:33
@MedhatFarid not sure what you are doing in the new code. I used console.log just to show the result..you don't need to use the console.log as such – Talmacel Marian Silviu Oct 08 '21 at 14:52
Just use it to modify the code, the problem now is that the result is repeated – Medhat Farid Oct 08 '21 at 14:56

score 0 · Accepted Answer · answered Oct 08 '21 at 14:22

You can use Set with filter to achieve the desired result.

const arr = [
  { userid: "5", articleid: "3" },
  { userid: "5", articleid: "3" },
  { userid: "5", articleid: "3" },
  { userid: "1", articleid: "2" },
];

const set = new Set();

const result = arr.filter(({ userid, articleid }) => {
  if (set.has(`${userid}|${articleid}`)) return false;
  else {
    set.add(`${userid}|${articleid}`);
    return true;
  }
});

console.log(result);

score 0 · Answer 3 · answered Oct 08 '21 at 14:32

You can use filter on your array to do it.

The first one allows you to filter only by userID, and the second one with both values to separate also those who are not really duplicates.

const values = [
  { userid: "5", articleid: "3" },
  { userid: "5", articleid: "3" },
  { userid: "5", articleid: "3" },
  { userid: "5", articleid: "2" },
  { userid: "1", articleid: "2" },
];

const first = values.filter(
  (element, index, array) =>
    array.findIndex(
      (otherElement) => element.userid === otherElement.userid
    ) === index
);

const second = values.filter(
  (element, index, array) =>
    array.findIndex(
      (otherElement) =>
        element.userid === otherElement.userid &&
        element.articleid === otherElement.articleid
    ) === index
);

console.log("first", first);
console.log("second", second);

By searching a little more, there was already the answer on several posts.

javascript foreach loop group by values

3 Answers3