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);
            }
        });
    }

Check documentations on how array functions work, you'll be able to find the solution. — Jayendra Sharan
– Jayendra Sharan, Commented Oct 8, 2021 at 14:20

Talmacel Marian Silviu · Accepted Answer · 2021-10-08 14:22:16Z

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 8, 2021 at 14:22

Talmacel Marian Silviu

1,7762 gold badges10 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

jet_24 Over a year ago

Wow, this is cool. I've never seen this before. I will research how this works.

Medhat Farid Over a year ago

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

Talmacel Marian Silviu Over a year ago

@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

Medhat Farid Over a year ago

Just use it to modify the code, the problem now is that the result is repeated

DecPK · Accepted Answer · 2021-10-08 14:22:39Z

0

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);

answered Oct 8, 2021 at 14:22

DecPK

25.4k6 gold badges32 silver badges46 bronze badges

Comments

Aleiqs · Accepted Answer · 2021-10-08 14:32:42Z

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.

Collectives™ on Stack Overflow

javascript foreach loop group by values

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related