React - filtering array by multiple keys

Question

I have prepared some array filtering functionality:

export default function App() {
  const input = [
    {"unix":1, "val_1":"True", "val_2": 5, "val_3": 10},
    {"unix":2, "val_1":"True", "val_2": 5, "val_3": 10},
    {"unix":3, "val_1":"False", "val_2": 3, "val_3": 2},
    {"unix":4, "val_1":"True", "val_2": 7, "val_3": 1},
    {"unix":5, "val_1":"True", "val_2": 7, "val_3": 1},
  ]
  return (
    <div className="App">
      {
        [...new Map(input.map(i => [i.val_1+i.val_2+i.val3, i])).values()].map(
          (data) => {
            return (
              <div>
                <p>unix: {data.unix} val_1: {data.val_1} val_2: {data.val_2} val_3: {data.val_3}</p>
                <p>-----------------------</p>
              </div>
            )
          }
        )
      }
    </div>
  );
}

It's filtering this array by val_1, but how to filter by val_1, val_2 and val_3?

Some simple solution is just concatenate val_2, val_2 and val_3:

[...new Map(input.map(i => [i.val_1+i.val_2+i.val_3, i])).values()].map( ... )

But I'm not sure it's a good idea.

What do you think?

Edit: If filtered by val_1, val_2 and val_3 expected output:

unix: 2 val_1: True val_2: 5 val_3: 10

-----------------------

unix: 3 val_1: False val_2: 3 val_3: 2

-----------------------

unix: 5 val_1: True val_2: 7 val_3: 1

-----------------------

You must be mistaking[`Array.prototype.map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) for [`Array.prototype.filter`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter). — xGeo, May 28 '21 at 17:49
what is it that you want to do? what output do you `expect`? — crispengari, May 28 '21 at 18:56
@CrispenGari Please don't use code formatting for emphasis; use **bold** (`**bold**`) or _italics_ (`_italics_`) for emphasis. Leave code formatting for, well, code. — Heretic Monkey, May 28 '21 at 19:20
@CrispenGari just want to have only one row from list above when val_1, val_2 and val_3 are the same. I mean: if val_1[idx] == val_1[idx+1] && val_3[idx] == val_3[idx+1] && val_3[idx] == val_3[idx+1] just show row[idx] — tomm, May 28 '21 at 19:25
Concatenation is unlikely to work well, because "231" can be the concatenation of "2" and "31" or "23" and "1" or "231" and "" or "" and "231" (I don't know enough about your dataset to know if any of those combinations are possible, but nonetheless, it's a problem in the general sense. — Heretic Monkey, May 28 '21 at 20:18
Does this answer your question? [How to remove all duplicates from an array of objects?](https://stackoverflow.com/questions/2218999/how-to-remove-all-duplicates-from-an-array-of-objects) — Heretic Monkey, May 28 '21 at 20:21

score 0 · Answer 1 · answered May 28 '21 at 19:27

0

You should specify which key are you filtering based on for example if you want to return iterms based on the following conditions:

unix > 2 and item.val_1 === True

Then you can do it as follows:

filtered = input.filter(item => item.unix > 2 && item.val_1)
console.log(filtered)

answered May 28 '21 at 19:27

crispengari

7,901
7
45
53

Yeah, but how to compare the item[idx].val_1 and item[idx+1].val_1? And show just and item[idx] if item[idx].val_1 == item[idx+1].val_1? – tomm May 28 '21 at 19:32
`item[idx+1]` is not iteratable if you use filter in your case. You can not do that – crispengari May 28 '21 at 19:34

React - filtering array by multiple keys

1 Answers1